diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/test/core/Text.js b/test/core/Text.js index 61cfac7..53bdc6c 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -1,6 +1,9 @@ -describe('PIXI.Text', function () { - describe('destroy', function () { - it('should call through to Sprite.destroy', function () { +describe('PIXI.Text', function () +{ + describe('destroy', function () + { + it('should call through to Sprite.destroy', function () + { var text = new PIXI.Text("foo"); expect(text.anchor).to.not.equal(null); @@ -8,7 +11,8 @@ expect(text.anchor).to.equal(null); }); - it('should set context to null', function () { + it('should set context to null', function () + { var text = new PIXI.Text("foo"); expect(text.style).to.not.equal(null); @@ -16,7 +20,8 @@ expect(text.style).to.equal(null); }); - it('should destroy children if children flag is set', function () { + it('should destroy children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -26,7 +31,8 @@ expect(child.transform).to.equal(null); }); - it('should accept options correctly', function () { + it('should accept options correctly', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -36,35 +42,39 @@ expect(child.transform).to.equal(null); }); - it('should pass opts on to children if children flag is set', function () { + it('should pass opts on to children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(), childDestroyOpts; - child.destroy = function(opts) { + child.destroy = function (opts) + { childDestroyOpts = opts; }; text.addChild(child); text.destroy({children: true, texture: true}); - expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture:true}); + expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture: true}); }); - it('should modify the height of the object when setting height', function () { + it('should modify the height of the object when setting height', function () + { - var text = new PIXI.Text("foo"); - text.height = 300; + var text = new PIXI.Text("foo"); + text.height = 300; - expect(text.height).to.equal(300); + expect(text.height).to.equal(300); }); - it('should modify the width of the object when setting width', function () { + it('should modify the width of the object when setting width', function () + { - var text = new PIXI.Text("foo"); - text.width = 300; + var text = new PIXI.Text("foo"); + text.width = 300; - expect(text.width).to.equal(300); + expect(text.width).to.equal(300); }); }); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/test/core/Text.js b/test/core/Text.js index 61cfac7..53bdc6c 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -1,6 +1,9 @@ -describe('PIXI.Text', function () { - describe('destroy', function () { - it('should call through to Sprite.destroy', function () { +describe('PIXI.Text', function () +{ + describe('destroy', function () + { + it('should call through to Sprite.destroy', function () + { var text = new PIXI.Text("foo"); expect(text.anchor).to.not.equal(null); @@ -8,7 +11,8 @@ expect(text.anchor).to.equal(null); }); - it('should set context to null', function () { + it('should set context to null', function () + { var text = new PIXI.Text("foo"); expect(text.style).to.not.equal(null); @@ -16,7 +20,8 @@ expect(text.style).to.equal(null); }); - it('should destroy children if children flag is set', function () { + it('should destroy children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -26,7 +31,8 @@ expect(child.transform).to.equal(null); }); - it('should accept options correctly', function () { + it('should accept options correctly', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -36,35 +42,39 @@ expect(child.transform).to.equal(null); }); - it('should pass opts on to children if children flag is set', function () { + it('should pass opts on to children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(), childDestroyOpts; - child.destroy = function(opts) { + child.destroy = function (opts) + { childDestroyOpts = opts; }; text.addChild(child); text.destroy({children: true, texture: true}); - expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture:true}); + expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture: true}); }); - it('should modify the height of the object when setting height', function () { + it('should modify the height of the object when setting height', function () + { - var text = new PIXI.Text("foo"); - text.height = 300; + var text = new PIXI.Text("foo"); + text.height = 300; - expect(text.height).to.equal(300); + expect(text.height).to.equal(300); }); - it('should modify the width of the object when setting width', function () { + it('should modify the width of the object when setting width', function () + { - var text = new PIXI.Text("foo"); - text.width = 300; + var text = new PIXI.Text("foo"); + text.width = 300; - expect(text.width).to.equal(300); + expect(text.width).to.equal(300); }); }); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index b9f6b2c..d2702ce 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -1,7 +1,7 @@ -describe('getLocalBounds', function () { - - - it('should register correct local-bounds with a LOADED Sprite', function() { +describe('getLocalBounds', function () +{ + it('should register correct local-bounds with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -33,7 +33,8 @@ }); - it('should register correct local-bounds with Graphics', function() { + it('should register correct local-bounds with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -53,7 +54,8 @@ }); - it('should register correct local-bounds with an empty Container', function() { + it('should register correct local-bounds with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -70,7 +72,8 @@ }); - it('should register correct local-bounds with an item that has already had its parent Container transformed', function() { + it('should register correct local-bounds with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -92,10 +95,10 @@ expect(bounds.height).to.equal(10); - }); - it('should register correct local-bounds with a Mesh', function() { + it('should register correct local-bounds with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -115,21 +118,24 @@ expect(bounds.height).to.equal(10); }); - it('should register correct local-bounds with a cachAsBitmap item inside after a render', function() { + it('should register correct local-bounds with a cachAsBitmap item inside after a render', function () + { var parent = new PIXI.Container(); var graphic = new PIXI.Graphics(); graphic.beginFill(0xffffff); - graphic.drawRect(0,0,100,100); + graphic.drawRect(0, 0, 100, 100); graphic.endFill(); - graphic.cacheAsBitmap=true; + graphic.cacheAsBitmap = true; parent.addChild(graphic); var renderer = new PIXI.CanvasRenderer(100, 100); - renderer.sayHello = function(){}; + renderer.sayHello = function () + { + }; renderer.render(parent); var bounds = parent.getLocalBounds(); @@ -139,4 +145,4 @@ expect(bounds.width).to.equal(100); expect(bounds.height).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/test/core/Text.js b/test/core/Text.js index 61cfac7..53bdc6c 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -1,6 +1,9 @@ -describe('PIXI.Text', function () { - describe('destroy', function () { - it('should call through to Sprite.destroy', function () { +describe('PIXI.Text', function () +{ + describe('destroy', function () + { + it('should call through to Sprite.destroy', function () + { var text = new PIXI.Text("foo"); expect(text.anchor).to.not.equal(null); @@ -8,7 +11,8 @@ expect(text.anchor).to.equal(null); }); - it('should set context to null', function () { + it('should set context to null', function () + { var text = new PIXI.Text("foo"); expect(text.style).to.not.equal(null); @@ -16,7 +20,8 @@ expect(text.style).to.equal(null); }); - it('should destroy children if children flag is set', function () { + it('should destroy children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -26,7 +31,8 @@ expect(child.transform).to.equal(null); }); - it('should accept options correctly', function () { + it('should accept options correctly', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -36,35 +42,39 @@ expect(child.transform).to.equal(null); }); - it('should pass opts on to children if children flag is set', function () { + it('should pass opts on to children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(), childDestroyOpts; - child.destroy = function(opts) { + child.destroy = function (opts) + { childDestroyOpts = opts; }; text.addChild(child); text.destroy({children: true, texture: true}); - expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture:true}); + expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture: true}); }); - it('should modify the height of the object when setting height', function () { + it('should modify the height of the object when setting height', function () + { - var text = new PIXI.Text("foo"); - text.height = 300; + var text = new PIXI.Text("foo"); + text.height = 300; - expect(text.height).to.equal(300); + expect(text.height).to.equal(300); }); - it('should modify the width of the object when setting width', function () { + it('should modify the width of the object when setting width', function () + { - var text = new PIXI.Text("foo"); - text.width = 300; + var text = new PIXI.Text("foo"); + text.width = 300; - expect(text.width).to.equal(300); + expect(text.width).to.equal(300); }); }); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index b9f6b2c..d2702ce 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -1,7 +1,7 @@ -describe('getLocalBounds', function () { - - - it('should register correct local-bounds with a LOADED Sprite', function() { +describe('getLocalBounds', function () +{ + it('should register correct local-bounds with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -33,7 +33,8 @@ }); - it('should register correct local-bounds with Graphics', function() { + it('should register correct local-bounds with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -53,7 +54,8 @@ }); - it('should register correct local-bounds with an empty Container', function() { + it('should register correct local-bounds with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -70,7 +72,8 @@ }); - it('should register correct local-bounds with an item that has already had its parent Container transformed', function() { + it('should register correct local-bounds with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -92,10 +95,10 @@ expect(bounds.height).to.equal(10); - }); - it('should register correct local-bounds with a Mesh', function() { + it('should register correct local-bounds with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -115,21 +118,24 @@ expect(bounds.height).to.equal(10); }); - it('should register correct local-bounds with a cachAsBitmap item inside after a render', function() { + it('should register correct local-bounds with a cachAsBitmap item inside after a render', function () + { var parent = new PIXI.Container(); var graphic = new PIXI.Graphics(); graphic.beginFill(0xffffff); - graphic.drawRect(0,0,100,100); + graphic.drawRect(0, 0, 100, 100); graphic.endFill(); - graphic.cacheAsBitmap=true; + graphic.cacheAsBitmap = true; parent.addChild(graphic); var renderer = new PIXI.CanvasRenderer(100, 100); - renderer.sayHello = function(){}; + renderer.sayHello = function () + { + }; renderer.render(parent); var bounds = parent.getLocalBounds(); @@ -139,4 +145,4 @@ expect(bounds.width).to.equal(100); expect(bounds.height).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/toGlobal.js b/test/core/toGlobal.js index 7fd34c1..c70c538 100644 --- a/test/core/toGlobal.js +++ b/test/core/toGlobal.js @@ -1,8 +1,7 @@ -describe('toGlobal', function () { - - - it('should return correct global cordinates of a point from within a displayObject', function() { - +describe('toGlobal', function () +{ + it('should return correct global cordinates of a point from within a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -28,7 +27,5 @@ expect(globalPoint.x).to.equal(220); expect(globalPoint.y).to.equal(220); - }); - }); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/test/core/Text.js b/test/core/Text.js index 61cfac7..53bdc6c 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -1,6 +1,9 @@ -describe('PIXI.Text', function () { - describe('destroy', function () { - it('should call through to Sprite.destroy', function () { +describe('PIXI.Text', function () +{ + describe('destroy', function () + { + it('should call through to Sprite.destroy', function () + { var text = new PIXI.Text("foo"); expect(text.anchor).to.not.equal(null); @@ -8,7 +11,8 @@ expect(text.anchor).to.equal(null); }); - it('should set context to null', function () { + it('should set context to null', function () + { var text = new PIXI.Text("foo"); expect(text.style).to.not.equal(null); @@ -16,7 +20,8 @@ expect(text.style).to.equal(null); }); - it('should destroy children if children flag is set', function () { + it('should destroy children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -26,7 +31,8 @@ expect(child.transform).to.equal(null); }); - it('should accept options correctly', function () { + it('should accept options correctly', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -36,35 +42,39 @@ expect(child.transform).to.equal(null); }); - it('should pass opts on to children if children flag is set', function () { + it('should pass opts on to children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(), childDestroyOpts; - child.destroy = function(opts) { + child.destroy = function (opts) + { childDestroyOpts = opts; }; text.addChild(child); text.destroy({children: true, texture: true}); - expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture:true}); + expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture: true}); }); - it('should modify the height of the object when setting height', function () { + it('should modify the height of the object when setting height', function () + { - var text = new PIXI.Text("foo"); - text.height = 300; + var text = new PIXI.Text("foo"); + text.height = 300; - expect(text.height).to.equal(300); + expect(text.height).to.equal(300); }); - it('should modify the width of the object when setting width', function () { + it('should modify the width of the object when setting width', function () + { - var text = new PIXI.Text("foo"); - text.width = 300; + var text = new PIXI.Text("foo"); + text.width = 300; - expect(text.width).to.equal(300); + expect(text.width).to.equal(300); }); }); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index b9f6b2c..d2702ce 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -1,7 +1,7 @@ -describe('getLocalBounds', function () { - - - it('should register correct local-bounds with a LOADED Sprite', function() { +describe('getLocalBounds', function () +{ + it('should register correct local-bounds with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -33,7 +33,8 @@ }); - it('should register correct local-bounds with Graphics', function() { + it('should register correct local-bounds with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -53,7 +54,8 @@ }); - it('should register correct local-bounds with an empty Container', function() { + it('should register correct local-bounds with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -70,7 +72,8 @@ }); - it('should register correct local-bounds with an item that has already had its parent Container transformed', function() { + it('should register correct local-bounds with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -92,10 +95,10 @@ expect(bounds.height).to.equal(10); - }); - it('should register correct local-bounds with a Mesh', function() { + it('should register correct local-bounds with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -115,21 +118,24 @@ expect(bounds.height).to.equal(10); }); - it('should register correct local-bounds with a cachAsBitmap item inside after a render', function() { + it('should register correct local-bounds with a cachAsBitmap item inside after a render', function () + { var parent = new PIXI.Container(); var graphic = new PIXI.Graphics(); graphic.beginFill(0xffffff); - graphic.drawRect(0,0,100,100); + graphic.drawRect(0, 0, 100, 100); graphic.endFill(); - graphic.cacheAsBitmap=true; + graphic.cacheAsBitmap = true; parent.addChild(graphic); var renderer = new PIXI.CanvasRenderer(100, 100); - renderer.sayHello = function(){}; + renderer.sayHello = function () + { + }; renderer.render(parent); var bounds = parent.getLocalBounds(); @@ -139,4 +145,4 @@ expect(bounds.width).to.equal(100); expect(bounds.height).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/toGlobal.js b/test/core/toGlobal.js index 7fd34c1..c70c538 100644 --- a/test/core/toGlobal.js +++ b/test/core/toGlobal.js @@ -1,8 +1,7 @@ -describe('toGlobal', function () { - - - it('should return correct global cordinates of a point from within a displayObject', function() { - +describe('toGlobal', function () +{ + it('should return correct global cordinates of a point from within a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -28,7 +27,5 @@ expect(globalPoint.x).to.equal(220); expect(globalPoint.y).to.equal(220); - }); - }); diff --git a/test/core/toLocal.js b/test/core/toLocal.js index 33447d0..f64406d 100644 --- a/test/core/toLocal.js +++ b/test/core/toLocal.js @@ -1,7 +1,7 @@ -describe('toLocal', function () { - - it('should return correct local cordinates of a displayObject', function() { - +describe('toLocal', function () +{ + it('should return correct local cordinates of a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -30,8 +30,8 @@ }); - it('should map the correct local cordinates of a displayObject to another', function() { - + it('should map the correct local cordinates of a displayObject to another', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -54,4 +54,4 @@ expect(localPoint.y).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/test/core/Text.js b/test/core/Text.js index 61cfac7..53bdc6c 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -1,6 +1,9 @@ -describe('PIXI.Text', function () { - describe('destroy', function () { - it('should call through to Sprite.destroy', function () { +describe('PIXI.Text', function () +{ + describe('destroy', function () + { + it('should call through to Sprite.destroy', function () + { var text = new PIXI.Text("foo"); expect(text.anchor).to.not.equal(null); @@ -8,7 +11,8 @@ expect(text.anchor).to.equal(null); }); - it('should set context to null', function () { + it('should set context to null', function () + { var text = new PIXI.Text("foo"); expect(text.style).to.not.equal(null); @@ -16,7 +20,8 @@ expect(text.style).to.equal(null); }); - it('should destroy children if children flag is set', function () { + it('should destroy children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -26,7 +31,8 @@ expect(child.transform).to.equal(null); }); - it('should accept options correctly', function () { + it('should accept options correctly', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -36,35 +42,39 @@ expect(child.transform).to.equal(null); }); - it('should pass opts on to children if children flag is set', function () { + it('should pass opts on to children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(), childDestroyOpts; - child.destroy = function(opts) { + child.destroy = function (opts) + { childDestroyOpts = opts; }; text.addChild(child); text.destroy({children: true, texture: true}); - expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture:true}); + expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture: true}); }); - it('should modify the height of the object when setting height', function () { + it('should modify the height of the object when setting height', function () + { - var text = new PIXI.Text("foo"); - text.height = 300; + var text = new PIXI.Text("foo"); + text.height = 300; - expect(text.height).to.equal(300); + expect(text.height).to.equal(300); }); - it('should modify the width of the object when setting width', function () { + it('should modify the width of the object when setting width', function () + { - var text = new PIXI.Text("foo"); - text.width = 300; + var text = new PIXI.Text("foo"); + text.width = 300; - expect(text.width).to.equal(300); + expect(text.width).to.equal(300); }); }); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index b9f6b2c..d2702ce 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -1,7 +1,7 @@ -describe('getLocalBounds', function () { - - - it('should register correct local-bounds with a LOADED Sprite', function() { +describe('getLocalBounds', function () +{ + it('should register correct local-bounds with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -33,7 +33,8 @@ }); - it('should register correct local-bounds with Graphics', function() { + it('should register correct local-bounds with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -53,7 +54,8 @@ }); - it('should register correct local-bounds with an empty Container', function() { + it('should register correct local-bounds with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -70,7 +72,8 @@ }); - it('should register correct local-bounds with an item that has already had its parent Container transformed', function() { + it('should register correct local-bounds with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -92,10 +95,10 @@ expect(bounds.height).to.equal(10); - }); - it('should register correct local-bounds with a Mesh', function() { + it('should register correct local-bounds with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -115,21 +118,24 @@ expect(bounds.height).to.equal(10); }); - it('should register correct local-bounds with a cachAsBitmap item inside after a render', function() { + it('should register correct local-bounds with a cachAsBitmap item inside after a render', function () + { var parent = new PIXI.Container(); var graphic = new PIXI.Graphics(); graphic.beginFill(0xffffff); - graphic.drawRect(0,0,100,100); + graphic.drawRect(0, 0, 100, 100); graphic.endFill(); - graphic.cacheAsBitmap=true; + graphic.cacheAsBitmap = true; parent.addChild(graphic); var renderer = new PIXI.CanvasRenderer(100, 100); - renderer.sayHello = function(){}; + renderer.sayHello = function () + { + }; renderer.render(parent); var bounds = parent.getLocalBounds(); @@ -139,4 +145,4 @@ expect(bounds.width).to.equal(100); expect(bounds.height).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/toGlobal.js b/test/core/toGlobal.js index 7fd34c1..c70c538 100644 --- a/test/core/toGlobal.js +++ b/test/core/toGlobal.js @@ -1,8 +1,7 @@ -describe('toGlobal', function () { - - - it('should return correct global cordinates of a point from within a displayObject', function() { - +describe('toGlobal', function () +{ + it('should return correct global cordinates of a point from within a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -28,7 +27,5 @@ expect(globalPoint.x).to.equal(220); expect(globalPoint.y).to.equal(220); - }); - }); diff --git a/test/core/toLocal.js b/test/core/toLocal.js index 33447d0..f64406d 100644 --- a/test/core/toLocal.js +++ b/test/core/toLocal.js @@ -1,7 +1,7 @@ -describe('toLocal', function () { - - it('should return correct local cordinates of a displayObject', function() { - +describe('toLocal', function () +{ + it('should return correct local cordinates of a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -30,8 +30,8 @@ }); - it('should map the correct local cordinates of a displayObject to another', function() { - + it('should map the correct local cordinates of a displayObject to another', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -54,4 +54,4 @@ expect(localPoint.y).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/util.js b/test/core/util.js index ab695ae..3ce4726 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -1,18 +1,24 @@ -describe('PIXI.utils', function () { - describe('uid', function () { - it('should exist', function () { +describe('PIXI.utils', function () +{ + describe('uid', function () + { + it('should exist', function () + { expect(PIXI.utils.uid) .to.be.a('function'); }); - it('should return a number', function () { + it('should return a number', function () + { expect(PIXI.utils.uid()) .to.be.a('number'); }); }); - describe('hex2rgb', function () { - it('should exist', function () { + describe('hex2rgb', function () + { + it('should exist', function () + { expect(PIXI.utils.hex2rgb) .to.be.a('function'); }); @@ -20,8 +26,10 @@ // it('should properly convert number to rgb array'); }); - describe('hex2string', function () { - it('should exist', function () { + describe('hex2string', function () + { + it('should exist', function () + { expect(PIXI.utils.hex2string) .to.be.a('function'); }); @@ -29,8 +37,10 @@ // it('should properly convert number to hex color string'); }); - describe('rgb2hex', function () { - it('should exist', function () { + describe('rgb2hex', function () + { + it('should exist', function () + { expect(PIXI.utils.rgb2hex) .to.be.a('function'); }); @@ -38,8 +48,10 @@ // it('should properly convert rgb array to hex color string'); }); - describe('getResolutionOfUrl', function () { - it('should exist', function () { + describe('getResolutionOfUrl', function () + { + it('should exist', function () + { expect(PIXI.utils.getResolutionOfUrl) .to.be.a('function'); }); @@ -47,66 +59,82 @@ // it('should return the correct resolution based on a URL'); }); - describe('sayHello', function () { - it('should exist', function () { + describe('sayHello', function () + { + it('should exist', function () + { expect(PIXI.utils.sayHello) .to.be.a('function'); }); }); - describe('isWebGLSupported', function () { - it('should exist', function () { + describe('isWebGLSupported', function () + { + it('should exist', function () + { expect(PIXI.utils.isWebGLSupported) .to.be.a('function'); }); }); - describe('sign', function () { - it('should return 0 for 0', function () { + describe('sign', function () + { + it('should return 0 for 0', function () + { expect(PIXI.utils.sign(0)) .to.be.equal(0); }); - it('should return -1 for negative numbers', function () { - for (var i = 0;i<10;i+=1){ + it('should return -1 for negative numbers', function () + { + for (var i = 0; i < 10; i += 1) + { expect(PIXI.utils.sign(-Math.random())) .to.be.equal(-1); } }); - it('should return 1 for positive numbers', function () { - for (var i = 0;i<10;i+=1){ + it('should return 1 for positive numbers', function () + { + for (var i = 0; i < 10; i += 1) + { expect(PIXI.utils.sign(Math.random() + 0.000001)) .to.be.equal(1); } }); }); - describe('.removeItems', function () { + describe('.removeItems', function () + { var arr; - beforeEach(function () { + beforeEach(function () + { arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; }); - it('should return if the start index is greater than or equal to the length of the array', function () { - PIXI.utils.removeItems(arr, arr.length+1, 5); + it('should return if the start index is greater than or equal to the length of the array', function () + { + PIXI.utils.removeItems(arr, arr.length + 1, 5); expect(arr.length).to.be.equal(10); }); - it('should return if the remove count is 0', function () { + it('should return if the remove count is 0', function () + { PIXI.utils.removeItems(arr, 2, 0); expect(arr.length).to.be.equal(10); }); - it('should remove the number of elements specified from the array, starting from the start index', function () { - var res = [ 1, 2, 3, 8, 9, 10 ]; + it('should remove the number of elements specified from the array, starting from the start index', function () + { + var res = [1, 2, 3, 8, 9, 10]; PIXI.utils.removeItems(arr, 3, 4); expect(arr).to.be.deep.equal(res); }); - it('should remove rest of elements if the delete count is > than the number of elements after start index', function () { - var res = [ 1, 2, 3, 4, 5, 6, 7 ]; + it('should remove rest of elements if the delete count is > than the number of elements after start index', function () + { + var res = [1, 2, 3, 4, 5, 6, 7]; PIXI.utils.removeItems(arr, 7, 10); expect(arr).to.be.deep.equal(res); }); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/test/core/Text.js b/test/core/Text.js index 61cfac7..53bdc6c 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -1,6 +1,9 @@ -describe('PIXI.Text', function () { - describe('destroy', function () { - it('should call through to Sprite.destroy', function () { +describe('PIXI.Text', function () +{ + describe('destroy', function () + { + it('should call through to Sprite.destroy', function () + { var text = new PIXI.Text("foo"); expect(text.anchor).to.not.equal(null); @@ -8,7 +11,8 @@ expect(text.anchor).to.equal(null); }); - it('should set context to null', function () { + it('should set context to null', function () + { var text = new PIXI.Text("foo"); expect(text.style).to.not.equal(null); @@ -16,7 +20,8 @@ expect(text.style).to.equal(null); }); - it('should destroy children if children flag is set', function () { + it('should destroy children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -26,7 +31,8 @@ expect(child.transform).to.equal(null); }); - it('should accept options correctly', function () { + it('should accept options correctly', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -36,35 +42,39 @@ expect(child.transform).to.equal(null); }); - it('should pass opts on to children if children flag is set', function () { + it('should pass opts on to children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(), childDestroyOpts; - child.destroy = function(opts) { + child.destroy = function (opts) + { childDestroyOpts = opts; }; text.addChild(child); text.destroy({children: true, texture: true}); - expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture:true}); + expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture: true}); }); - it('should modify the height of the object when setting height', function () { + it('should modify the height of the object when setting height', function () + { - var text = new PIXI.Text("foo"); - text.height = 300; + var text = new PIXI.Text("foo"); + text.height = 300; - expect(text.height).to.equal(300); + expect(text.height).to.equal(300); }); - it('should modify the width of the object when setting width', function () { + it('should modify the width of the object when setting width', function () + { - var text = new PIXI.Text("foo"); - text.width = 300; + var text = new PIXI.Text("foo"); + text.width = 300; - expect(text.width).to.equal(300); + expect(text.width).to.equal(300); }); }); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index b9f6b2c..d2702ce 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -1,7 +1,7 @@ -describe('getLocalBounds', function () { - - - it('should register correct local-bounds with a LOADED Sprite', function() { +describe('getLocalBounds', function () +{ + it('should register correct local-bounds with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -33,7 +33,8 @@ }); - it('should register correct local-bounds with Graphics', function() { + it('should register correct local-bounds with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -53,7 +54,8 @@ }); - it('should register correct local-bounds with an empty Container', function() { + it('should register correct local-bounds with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -70,7 +72,8 @@ }); - it('should register correct local-bounds with an item that has already had its parent Container transformed', function() { + it('should register correct local-bounds with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -92,10 +95,10 @@ expect(bounds.height).to.equal(10); - }); - it('should register correct local-bounds with a Mesh', function() { + it('should register correct local-bounds with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -115,21 +118,24 @@ expect(bounds.height).to.equal(10); }); - it('should register correct local-bounds with a cachAsBitmap item inside after a render', function() { + it('should register correct local-bounds with a cachAsBitmap item inside after a render', function () + { var parent = new PIXI.Container(); var graphic = new PIXI.Graphics(); graphic.beginFill(0xffffff); - graphic.drawRect(0,0,100,100); + graphic.drawRect(0, 0, 100, 100); graphic.endFill(); - graphic.cacheAsBitmap=true; + graphic.cacheAsBitmap = true; parent.addChild(graphic); var renderer = new PIXI.CanvasRenderer(100, 100); - renderer.sayHello = function(){}; + renderer.sayHello = function () + { + }; renderer.render(parent); var bounds = parent.getLocalBounds(); @@ -139,4 +145,4 @@ expect(bounds.width).to.equal(100); expect(bounds.height).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/toGlobal.js b/test/core/toGlobal.js index 7fd34c1..c70c538 100644 --- a/test/core/toGlobal.js +++ b/test/core/toGlobal.js @@ -1,8 +1,7 @@ -describe('toGlobal', function () { - - - it('should return correct global cordinates of a point from within a displayObject', function() { - +describe('toGlobal', function () +{ + it('should return correct global cordinates of a point from within a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -28,7 +27,5 @@ expect(globalPoint.x).to.equal(220); expect(globalPoint.y).to.equal(220); - }); - }); diff --git a/test/core/toLocal.js b/test/core/toLocal.js index 33447d0..f64406d 100644 --- a/test/core/toLocal.js +++ b/test/core/toLocal.js @@ -1,7 +1,7 @@ -describe('toLocal', function () { - - it('should return correct local cordinates of a displayObject', function() { - +describe('toLocal', function () +{ + it('should return correct local cordinates of a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -30,8 +30,8 @@ }); - it('should map the correct local cordinates of a displayObject to another', function() { - + it('should map the correct local cordinates of a displayObject to another', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -54,4 +54,4 @@ expect(localPoint.y).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/util.js b/test/core/util.js index ab695ae..3ce4726 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -1,18 +1,24 @@ -describe('PIXI.utils', function () { - describe('uid', function () { - it('should exist', function () { +describe('PIXI.utils', function () +{ + describe('uid', function () + { + it('should exist', function () + { expect(PIXI.utils.uid) .to.be.a('function'); }); - it('should return a number', function () { + it('should return a number', function () + { expect(PIXI.utils.uid()) .to.be.a('number'); }); }); - describe('hex2rgb', function () { - it('should exist', function () { + describe('hex2rgb', function () + { + it('should exist', function () + { expect(PIXI.utils.hex2rgb) .to.be.a('function'); }); @@ -20,8 +26,10 @@ // it('should properly convert number to rgb array'); }); - describe('hex2string', function () { - it('should exist', function () { + describe('hex2string', function () + { + it('should exist', function () + { expect(PIXI.utils.hex2string) .to.be.a('function'); }); @@ -29,8 +37,10 @@ // it('should properly convert number to hex color string'); }); - describe('rgb2hex', function () { - it('should exist', function () { + describe('rgb2hex', function () + { + it('should exist', function () + { expect(PIXI.utils.rgb2hex) .to.be.a('function'); }); @@ -38,8 +48,10 @@ // it('should properly convert rgb array to hex color string'); }); - describe('getResolutionOfUrl', function () { - it('should exist', function () { + describe('getResolutionOfUrl', function () + { + it('should exist', function () + { expect(PIXI.utils.getResolutionOfUrl) .to.be.a('function'); }); @@ -47,66 +59,82 @@ // it('should return the correct resolution based on a URL'); }); - describe('sayHello', function () { - it('should exist', function () { + describe('sayHello', function () + { + it('should exist', function () + { expect(PIXI.utils.sayHello) .to.be.a('function'); }); }); - describe('isWebGLSupported', function () { - it('should exist', function () { + describe('isWebGLSupported', function () + { + it('should exist', function () + { expect(PIXI.utils.isWebGLSupported) .to.be.a('function'); }); }); - describe('sign', function () { - it('should return 0 for 0', function () { + describe('sign', function () + { + it('should return 0 for 0', function () + { expect(PIXI.utils.sign(0)) .to.be.equal(0); }); - it('should return -1 for negative numbers', function () { - for (var i = 0;i<10;i+=1){ + it('should return -1 for negative numbers', function () + { + for (var i = 0; i < 10; i += 1) + { expect(PIXI.utils.sign(-Math.random())) .to.be.equal(-1); } }); - it('should return 1 for positive numbers', function () { - for (var i = 0;i<10;i+=1){ + it('should return 1 for positive numbers', function () + { + for (var i = 0; i < 10; i += 1) + { expect(PIXI.utils.sign(Math.random() + 0.000001)) .to.be.equal(1); } }); }); - describe('.removeItems', function () { + describe('.removeItems', function () + { var arr; - beforeEach(function () { + beforeEach(function () + { arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; }); - it('should return if the start index is greater than or equal to the length of the array', function () { - PIXI.utils.removeItems(arr, arr.length+1, 5); + it('should return if the start index is greater than or equal to the length of the array', function () + { + PIXI.utils.removeItems(arr, arr.length + 1, 5); expect(arr.length).to.be.equal(10); }); - it('should return if the remove count is 0', function () { + it('should return if the remove count is 0', function () + { PIXI.utils.removeItems(arr, 2, 0); expect(arr.length).to.be.equal(10); }); - it('should remove the number of elements specified from the array, starting from the start index', function () { - var res = [ 1, 2, 3, 8, 9, 10 ]; + it('should remove the number of elements specified from the array, starting from the start index', function () + { + var res = [1, 2, 3, 8, 9, 10]; PIXI.utils.removeItems(arr, 3, 4); expect(arr).to.be.deep.equal(res); }); - it('should remove rest of elements if the delete count is > than the number of elements after start index', function () { - var res = [ 1, 2, 3, 4, 5, 6, 7 ]; + it('should remove rest of elements if the delete count is > than the number of elements after start index', function () + { + var res = [1, 2, 3, 4, 5, 6, 7]; PIXI.utils.removeItems(arr, 7, 10); expect(arr).to.be.deep.equal(res); }); diff --git a/test/index.js b/test/index.js index fb7dd8a..e8bed72 100755 --- a/test/index.js +++ b/test/index.js @@ -1,9 +1,11 @@ require('../bin/pixi'); -describe('PIXI', function () { - it('should exist as a global object', function () { +describe('PIXI', function () +{ + it('should exist as a global object', function () + { expect(PIXI).to.be.an('object'); }); require('./core'); require('./interaction'); -}); \ No newline at end of file +}); diff --git a/.eslintrc b/.eslintrc index f90bdde..bc95827 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,15 @@ "rules": { "no-console": 0, "no-debugger": 1, - "arrow-spacing": 1 + "arrow-spacing": 1, + "prefer-const": [ + "warn", + { + "destructuring": "any", + "ignoreReadBeforeAssign": false + } + ], + "brace-style": [2, "allman"] }, "parserOptions": { "ecmaVersion": 6, diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index 80f3f28..d6d3a70 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -20,7 +20,7 @@ { constructor(renderer) { - if((Device.tablet || Device.phone) && !navigator.isCocoonJS) + if ((Device.tablet || Device.phone) && !navigator.isCocoonJS) { this.createTouchHook(); } @@ -108,13 +108,14 @@ hookDiv.style.width = 1 + 'px'; hookDiv.style.height = 1 + 'px'; hookDiv.style.position = 'absolute'; - hookDiv.style.top = -1000+'px'; - hookDiv.style.left = -1000+'px'; + hookDiv.style.top = -1000 + 'px'; + hookDiv.style.left = -1000 + 'px'; hookDiv.style.zIndex = 2; hookDiv.style.backgroundColor = '#FF0000'; hookDiv.title = 'HOOK DIV'; - hookDiv.addEventListener('focus', () => { + hookDiv.addEventListener('focus', () => + { this.isMobileAccessabillity = true; this.activate(); @@ -132,7 +133,7 @@ */ activate() { - if(this.isActive ) + if (this.isActive) { return; } @@ -144,7 +145,7 @@ this.renderer.on('postrender', this.update, this); - if(this.renderer.view.parentNode) + if (this.renderer.view.parentNode) { this.renderer.view.parentNode.appendChild(this.div); } @@ -157,7 +158,7 @@ deactivate() { - if(!this.isActive || this.isMobileAccessabillity) + if (!this.isActive || this.isMobileAccessabillity) { return; } @@ -169,7 +170,7 @@ this.renderer.off('postrender', this.update); - if(this.div.parentNode) + if (this.div.parentNode) { this.div.parentNode.removeChild(this.div); } @@ -183,24 +184,25 @@ */ updateAccessibleObjects(displayObject) { - if(!displayObject.visible) + if (!displayObject.visible) { return; } - if(displayObject.accessible && displayObject.interactive) + if (displayObject.accessible && displayObject.interactive) { - if(!displayObject._accessibleActive) + if (!displayObject._accessibleActive) { this.addChild(displayObject); } - displayObject.renderId = this.renderId; + displayObject.renderId = this.renderId; } const children = displayObject.children; - for (let i = children.length - 1; i >= 0; i--) { + for (let i = children.length - 1; i >= 0; i--) + { this.updateAccessibleObjects(children[i]); } @@ -213,15 +215,16 @@ */ update() { - if(!this.renderer.renderingToScreen) { + if (!this.renderer.renderingToScreen) + { return; - } + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); const rect = this.renderer.view.getBoundingClientRect(); - const sx = rect.width / this.renderer.width; + const sx = rect.width / this.renderer.width; const sy = rect.height / this.renderer.height; let div = this.div; @@ -236,18 +239,18 @@ const child = this.children[i]; - if(child.renderId !== this.renderId) + if (child.renderId !== this.renderId) { child._accessibleActive = false; core.utils.removeItems(this.children, i, 1); - this.div.removeChild( child._accessibleDiv ); + this.div.removeChild(child._accessibleDiv); this.pool.push(child._accessibleDiv); child._accessibleDiv = null; i--; - if(this.children.length === 0) + if (this.children.length === 0) { this.deactivate(); } @@ -257,12 +260,12 @@ // map div to display.. div = child._accessibleDiv; let hitArea = child.hitArea; - let wt = child.worldTransform; + const wt = child.worldTransform; - if(child.hitArea) + if (child.hitArea) { div.style.left = ((wt.tx + (hitArea.x * wt.a)) * sx) + 'px'; - div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; + div.style.top = ((wt.ty + (hitArea.y * wt.d)) * sy) + 'px'; div.style.width = (hitArea.width * wt.a * sx) + 'px'; div.style.height = (hitArea.height * wt.d * sy) + 'px'; @@ -275,7 +278,7 @@ this.capHitArea(hitArea); div.style.left = (hitArea.x * sx) + 'px'; - div.style.top = (hitArea.y * sy) + 'px'; + div.style.top = (hitArea.y * sy) + 'px'; div.style.width = (hitArea.width * sx) + 'px'; div.style.height = (hitArea.height * sy) + 'px'; @@ -301,12 +304,12 @@ hitArea.y = 0; } - if ( hitArea.x + hitArea.width > this.renderer.width ) + if (hitArea.x + hitArea.width > this.renderer.width) { hitArea.width = this.renderer.width - hitArea.x; } - if ( hitArea.y + hitArea.height > this.renderer.height ) + if (hitArea.y + hitArea.height > this.renderer.height) { hitArea.height = this.renderer.height - hitArea.y; } @@ -318,11 +321,11 @@ */ addChild(displayObject) { - // this.activate(); + // this.activate(); let div = this.pool.pop(); - if(!div) + if (!div) { div = document.createElement('button'); @@ -340,7 +343,7 @@ } - if(displayObject.accessibleTitle) + if (displayObject.accessibleTitle) { div.title = displayObject.accessibleTitle; } @@ -349,7 +352,7 @@ div.title = 'displayObject ' + this.tabIndex; } - if(displayObject.accessibleHint) + if (displayObject.accessibleHint) { div.setAttribute('aria-label', displayObject.accessibleHint); } @@ -363,7 +366,7 @@ this.children.push(displayObject); - this.div.appendChild( displayObject._accessibleDiv ); + this.div.appendChild(displayObject._accessibleDiv); displayObject._accessibleDiv.tabIndex = displayObject.tabIndex; } @@ -374,7 +377,7 @@ */ _onClick(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'click', interactionManager.eventData); } @@ -384,7 +387,7 @@ */ _onFocus(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseover', interactionManager.eventData); } @@ -394,7 +397,7 @@ */ _onFocusOut(e) { - let interactionManager = this.renderer.plugins.interaction; + const interactionManager = this.renderer.plugins.interaction; interactionManager.dispatchEvent(e.target.displayObject, 'mouseout', interactionManager.eventData); } @@ -405,7 +408,7 @@ */ _onKeyDown(e) { - if(e.keyCode !== 9) + if (e.keyCode !== 9) { return; } diff --git a/src/core/display/Bounds.js b/src/core/display/Bounds.js index 79d7fc5..22559b3 100644 --- a/src/core/display/Bounds.js +++ b/src/core/display/Bounds.js @@ -63,7 +63,8 @@ */ getRectangle(rect) { - if (this.minX > this.maxX || this.minY > this.maxY) { + if (this.minX > this.maxX || this.minY > this.maxY) + { return Rectangle.EMPTY; } diff --git a/src/core/display/Container.js b/src/core/display/Container.js index abad78d..3e77c36 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -33,7 +33,8 @@ * * @private */ - onChildrenChange() {} + onChildrenChange() + {} /** * Adds a child or multiple children to the container. @@ -213,7 +214,7 @@ } else { - let index = this.children.indexOf(child); + const index = this.children.indexOf(child); if (index === -1) { diff --git a/src/core/display/DisplayObject.js b/src/core/display/DisplayObject.js index 4c61c4b..c5fd15a 100644 --- a/src/core/display/DisplayObject.js +++ b/src/core/display/DisplayObject.js @@ -15,8 +15,7 @@ * @mixes PIXI.interaction.interactiveTarget * @memberof PIXI */ -class DisplayObject extends EventEmitter -{ +class DisplayObject extends EventEmitter { constructor() { super(); @@ -32,7 +31,7 @@ * * @member {PIXI.TransformBase} */ - this.transform = new TransformClass(); + this.transform = new TransformClass(); /** * The opacity of the object. @@ -108,8 +107,10 @@ } - get _tempDisplayObjectParent() { - if (this.tempDisplayObjectParent === null) { + get _tempDisplayObjectParent() + { + if (this.tempDisplayObjectParent === null) + { this.tempDisplayObjectParent = new DisplayObject(); } return this.tempDisplayObjectParent; @@ -156,9 +157,9 @@ */ getBounds(skipUpdate, rect) { - if(!skipUpdate) + if (!skipUpdate) { - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.parent.transform._worldID++; @@ -172,14 +173,14 @@ } } - if(this._boundsID !== this._lastBoundsID) + if (this._boundsID !== this._lastBoundsID) { this.calculateBounds(); } - if(!rect) + if (!rect) { - if(!this._boundsRect) + if (!this._boundsRect) { this._boundsRect = new math.Rectangle(); } @@ -203,9 +204,9 @@ this.parent = null; this.transform = this._tempDisplayObjectParent.transform; - if(!rect) + if (!rect) { - if(!this._localBoundsRect) + if (!this._localBoundsRect) { this._localBoundsRect = new math.Rectangle(); } @@ -229,16 +230,16 @@ * @param [skipUpdate=false] {boolean} * @return {PIXI.Point} A point object representing the position of this object */ - toGlobal(position, point, skipUpdate=false) + toGlobal(position, point, skipUpdate = false) { - if(!skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -270,14 +271,14 @@ position = from.toGlobal(position, point, skipUpdate); } - if(! skipUpdate) + if (!skipUpdate) { this._recursivePostUpdateTransform(); // this parent check is for just in case the item is a root object. // If it is we need to give it a temporary parent so that displayObjectUpdateTransform works correctly // this is mainly to avoid a parent check in the main loop. Every little helps for performance :) - if(!this.parent) + if (!this.parent) { this.parent = this._tempDisplayObjectParent; this.displayObjectUpdateTransform(); @@ -344,7 +345,7 @@ * @param [pivotY=0] {number} The Y pivot value * @return {PIXI.DisplayObject} The DisplayObject instance */ - setTransform(x=0, y=0, scaleX=1, scaleY=1, rotation=0, skewX=0, skewY=0, pivotX=0, pivotY=0) + setTransform(x = 0, y = 0, scaleX = 1, scaleY = 1, rotation = 0, skewX = 0, skewY = 0, pivotX = 0, pivotY = 0) { this.position.x = x; this.position.y = y; @@ -384,6 +385,7 @@ this.interactive = false; this.interactiveChildren = false; } + /** * The position of the displayObject on the x axis relative to the local coordinates of the parent. * An alias to position.x @@ -395,6 +397,7 @@ { return this.position.x; } + set x(value) { this.transform.position.x = value; @@ -411,6 +414,7 @@ { return this.position.y; } + set y(value) { this.transform.position.y = value; @@ -451,7 +455,9 @@ { return this.transform.position; } - set position(value) { + + set position(value) + { this.transform.position.copy(value); } @@ -462,10 +468,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get scale() { + get scale() + { return this.transform.scale; } - set scale(value) { + + set scale(value) + { this.transform.scale.copy(value); } @@ -476,10 +485,13 @@ * @member {PIXI.Point|PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get pivot() { + get pivot() + { return this.transform.pivot; } - set pivot(value) { + + set pivot(value) + { this.transform.pivot.copy(value); } @@ -490,10 +502,13 @@ * @member {PIXI.ObservablePoint} * @memberof PIXI.DisplayObject# */ - get skew() { + get skew() + { return this.transform.skew; } - set skew(value) { + + set skew(value) + { this.transform.skew.copy(value); } @@ -507,6 +522,7 @@ { return this.transform.rotation; } + set rotation(value) { this.transform.rotation = value; @@ -523,7 +539,8 @@ { let item = this; - do { + do + { if (!item.visible) { return false; @@ -549,6 +566,7 @@ { return this._mask; } + set mask(value) { if (this._mask) @@ -576,6 +594,7 @@ { return this._filters && this._filters.slice(); } + set filters(value) { this._filters = value && value.slice(); diff --git a/src/core/display/Transform.js b/src/core/display/Transform.js index f104c27..fe08106 100644 --- a/src/core/display/Transform.js +++ b/src/core/display/Transform.js @@ -71,14 +71,13 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; - let a, b, c, d; - - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -96,12 +95,11 @@ const pt = parentTransform.worldTransform; const wt = this.worldTransform; const lt = this.localTransform; - let a, b, c, d; - a = this._cr * this.scale.x; - b = this._sr * this.scale.x; - c = -this._sr * this.scale.y; - d = this._cr * this.scale.y; + const a = this._cr * this.scale.x; + const b = this._sr * this.scale.x; + const c = -this._sr * this.scale.y; + const d = this._cr * this.scale.y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -137,10 +135,12 @@ * @member {number} * @memberof PIXI.Transform# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/display/TransformBase.js b/src/core/display/TransformBase.js index 9c250a8..313b682 100644 --- a/src/core/display/TransformBase.js +++ b/src/core/display/TransformBase.js @@ -30,9 +30,8 @@ /** * TransformBase does not have decomposition, so this function wont do anything */ - updateLocalTransform() { // eslint-disable-line no-unused-vars - - } + updateLocalTransform() + {} /** * Updates the values of the object and applies the parent's transform. diff --git a/src/core/display/TransformStatic.js b/src/core/display/TransformStatic.js index cbc9813..e8af5c5 100644 --- a/src/core/display/TransformStatic.js +++ b/src/core/display/TransformStatic.js @@ -72,17 +72,16 @@ /** * Updates only local matrix */ - updateLocalTransform() { + updateLocalTransform() + { const lt = this.localTransform; if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -112,12 +111,10 @@ if(this._localID !== this._currentLocalID) { // get the matrix values of the displayobject based on its transform properties.. - let a,b,c,d; - - a = this._cr * this.scale._x; - b = this._sr * this.scale._x; - c = -this._sr * this.scale._y; - d = this._cr * this.scale._y; + const a = this._cr * this.scale._x; + const b = this._sr * this.scale._x; + const c = -this._sr * this.scale._y; + const d = this._cr * this.scale._y; lt.a = this._cy * a + this._sy * c; lt.b = this._cy * b + this._sy * d; @@ -151,7 +148,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) { @@ -165,10 +162,12 @@ * @member {number} * @memberof PIXI.TransformStatic# */ - get rotation() { + get rotation() + { return this._rotation; } - set rotation(value) { + set rotation(value) + { this._rotation = value; this._sr = Math.sin(value); this._cr = Math.cos(value); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f886e5b..b697aec 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -190,15 +190,15 @@ { const clone = new Graphics(); - clone.renderable = this.renderable; - clone.fillAlpha = this.fillAlpha; - clone.lineWidth = this.lineWidth; - clone.lineColor = this.lineColor; - clone.tint = this.tint; - clone.blendMode = this.blendMode; - clone.isMask = this.isMask; + clone.renderable = this.renderable; + clone.fillAlpha = this.fillAlpha; + clone.lineWidth = this.lineWidth; + clone.lineColor = this.lineColor; + clone.tint = this.tint; + clone.blendMode = this.blendMode; + clone.isMask = this.isMask; clone.boundsPadding = this.boundsPadding; - clone.dirty = 0; + clone.dirty = 0; clone.cachedSpriteDirty = this.cachedSpriteDirty; // copy graphics data @@ -258,7 +258,7 @@ */ moveTo(x, y) { - const shape = new math.Polygon([x,y]); + const shape = new math.Polygon([x, y]); shape.closed = false; this.drawShape(shape); @@ -302,7 +302,7 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const n = 20; @@ -314,8 +314,8 @@ this.moveTo(0, 0); } - let fromX = points[points.length-2]; - let fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; let j = 0; for (let i = 1; i <= n; ++i) @@ -325,8 +325,8 @@ xa = fromX + ( (cpX - fromX) * j ); ya = fromY + ( (cpY - fromY) * j ); - points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), - ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); + points.push(xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), + ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j )); } this.dirty++; @@ -356,13 +356,13 @@ } else { - this.moveTo(0,0); + this.moveTo(0, 0); } const points = this.currentPath.shape.points; - const fromX = points[points.length-2]; - const fromY = points[points.length-1]; + const fromX = points[points.length - 2]; + const fromY = points[points.length - 1]; points.length -= 2; @@ -400,17 +400,17 @@ } const points = this.currentPath.shape.points, - fromX = points[points.length-2], - fromY = points[points.length-1], + fromX = points[points.length - 2], + fromY = points[points.length - 1], a1 = fromY - y1, b1 = fromX - x1, - a2 = y2 - y1, - b2 = x2 - x1, + a2 = y2 - y1, + b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { - if (points[points.length-2] !== x1 || points[points.length-1] !== y1) + if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) { points.push(x1, y1); } @@ -431,7 +431,7 @@ qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), - endAngle = Math.atan2(qy - cy, qx - cx); + endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -452,7 +452,7 @@ * @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=false) + arc(cx, cy, radius, startAngle, endAngle, anticlockwise = false) { if (startAngle === endAngle) @@ -460,19 +460,19 @@ return this; } - if( !anticlockwise && endAngle <= startAngle ) + if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } - else if( anticlockwise && startAngle <= endAngle ) + else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } const sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); - const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; + const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40; - if(sweep === 0) + if (sweep === 0) { return this; } @@ -491,8 +491,8 @@ const points = this.currentPath.shape.points; - const theta = sweep/(segs*2); - const theta2 = theta*2; + const theta = sweep / (segs * 2); + const theta2 = theta * 2; const cTheta = Math.cos(theta); const sTheta = Math.sin(theta); @@ -501,17 +501,17 @@ const remainder = ( segMinus % 1 ) / segMinus; - for(let i=0; i<=segMinus; i++) + for (let i = 0; i <= segMinus; i++) { - const real = i + remainder * i; + const real = i + remainder * i; const angle = ((theta) + startAngle + (theta2 * real)); const c = Math.cos(angle); const s = -Math.sin(angle); - points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, - ( (cTheta * -s) + (sTheta * c) ) * radius + cy); + points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, + ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty++; @@ -527,7 +527,7 @@ * @param [alpha=1] {number} the alpha of the fill * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - beginFill(color=0, alpha=1) + beginFill(color = 0, alpha = 1) { this.filling = true; this.fillColor = color; @@ -567,9 +567,9 @@ * @param height {number} The height of the rectangle * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRect( x, y, width, height ) + drawRect(x, y, width, height) { - this.drawShape(new math.Rectangle(x,y, width, height)); + this.drawShape(new math.Rectangle(x, y, width, height)); return this; } @@ -583,7 +583,7 @@ * @param radius {number} Radius of the rectangle corners * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ - drawRoundedRect( x, y, width, height, radius ) + drawRoundedRect(x, y, width, height, radius) { this.drawShape(new math.RoundedRectangle(x, y, width, height, radius)); @@ -600,7 +600,7 @@ */ drawCircle(x, y, radius) { - this.drawShape(new math.Circle(x,y, radius)); + this.drawShape(new math.Circle(x, y, radius)); return this; } @@ -685,7 +685,8 @@ * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor * @returns {boolean} */ - isFastRect() { + isFastRect() + { return this.graphicsData.length === 1 && this.graphicsData[0].shape.type === CONST.SHAPES.RECT && !this.graphicsData[0].lineWidth; } @@ -698,14 +699,14 @@ _renderWebGL(renderer) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(this.dirty !== this.fastRectDirty) + if (this.dirty !== this.fastRectDirty) { this.fastRectDirty = this.dirty; this._fastRect = this.isFastRect(); } //TODO this check can be moved to dirty? - if(this._fastRect) + if (this._fastRect) { this._renderSpriteRect(renderer); } @@ -720,9 +721,9 @@ _renderSpriteRect(renderer) { const rect = this.graphicsData[0].shape; - if(!this._spriteRect) + if (!this._spriteRect) { - if(!Graphics._SPRITE_TEXTURE) + if (!Graphics._SPRITE_TEXTURE) { Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10); @@ -738,9 +739,12 @@ this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE); } - if (this.tint === 0xffffff) { + if (this.tint === 0xffffff) + { this._spriteRect.tint = this.graphicsData[0].fillColor; - } else { + } + else + { const t1 = tempColor1; const t2 = tempColor2; utils.hex2rgb(this.graphicsData[0].fillColor, t1); @@ -806,20 +810,20 @@ } /** - * Tests if a point is inside this graphics object - * - * @param point {PIXI.Point} the point to test - * @return {boolean} the result of the test - */ - containsPoint( point ) + * Tests if a point is inside this graphics object + * + * @param point {PIXI.Point} the point to test + * @return {boolean} the result of the test + */ + containsPoint(point) { - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); const graphicsData = this.graphicsData; for (let i = 0; i < graphicsData.length; i++) { - let data = graphicsData[i]; + const data = graphicsData[i]; if (!data.fill) { @@ -829,7 +833,7 @@ // only deal with fills.. if (data.shape) { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } @@ -864,8 +868,8 @@ if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC) { - x = shape.x - lineWidth/2; - y = shape.y - lineWidth/2; + x = shape.x - lineWidth / 2; + y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; @@ -879,8 +883,8 @@ { x = shape.x; y = shape.y; - w = shape.radius + lineWidth/2; - h = shape.radius + lineWidth/2; + w = shape.radius + lineWidth / 2; + h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -892,8 +896,8 @@ { x = shape.x; y = shape.y; - w = shape.width + lineWidth/2; - h = shape.height + lineWidth/2; + w = shape.width + lineWidth / 2; + h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; @@ -909,13 +913,13 @@ for (let j = 0; j < points.length; j += 2) { x = points[j]; - y = points[j+1]; + y = points[j + 1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x - lineWidth < minX ? x - lineWidth : minX; + maxX = x + lineWidth > maxX ? x + lineWidth : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y - lineWidth < minY ? y - lineWidth : minY; + maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } @@ -928,7 +932,7 @@ maxY = 0; } - let padding = this.boundsPadding; + const padding = this.boundsPadding; this._localBounds.minX = minX - padding; this._localBounds.maxX = maxX + padding * 2; @@ -978,7 +982,7 @@ const canvasBuffer = RenderTexture.create(bounds.width * resolution, bounds.height * resolution); - if(!canvasRenderer) + if (!canvasRenderer) { canvasRenderer = new CanvasRenderer(); } @@ -1010,7 +1014,7 @@ // this is a hole! const hole = this.graphicsData.pop(); - this.currentPath = this.graphicsData[this.graphicsData.length-1]; + this.currentPath = this.graphicsData[this.graphicsData.length - 1]; this.currentPath.addHole(hole.shape); this.currentPath = null; @@ -1026,18 +1030,21 @@ super.destroy(arguments); // destroy each of the GraphicsData objects - for (let i = 0; i < this.graphicsData.length; ++i) { + for (let i = 0; i < this.graphicsData.length; ++i) + { this.graphicsData[i].destroy(); } // for each webgl data entry, destroy the WebGLGraphicsData - for (let id in this._webgl) { - for (let j = 0; j < this._webgl[id].data.length; ++j) { + for (const id in this._webgl) + { + for (let j = 0; j < this._webgl[id].data.length; ++j) + { this._webgl[id].data[j].destroy(); } } - if(this._spriteRect) + if (this._spriteRect) { this._spriteRect.destroy(); } diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index 261b1d9..6dd9165 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -15,54 +15,54 @@ { constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { - /* + /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; - /* + /** * @member {number} the color of the line to draw */ this.lineColor = lineColor; - /* + /** * @member {number} the alpha of the line to draw */ this.lineAlpha = lineAlpha; - /* + /** * @member {number} cached tint of the line to draw */ this._lineTint = lineColor; - /* + /** * @member {number} the color of the fill */ this.fillColor = fillColor; - /* + /** * @member {number} the alpha of the fill */ this.fillAlpha = fillAlpha; - /* + /** * @member {number} cached tint of the fill */ this._fillTint = fillColor; - /* + /** * @member {boolean} whether or not the shape is filled with a colour */ this.fill = fill; this.holes = []; - /* + /** * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} The shape object to draw. */ this.shape = shape; - /* + /** * @member {number} The type of the shape, see the Const.Shapes file for all the existing types, */ this.type = shape.type; @@ -98,10 +98,11 @@ /** * Destroys the Graphics data. */ - destroy() { + destroy() + { this.shape = null; this.holes = null; } } -export default GraphicsData; \ No newline at end of file +export default GraphicsData; diff --git a/src/core/graphics/canvas/CanvasGraphicsRenderer.js b/src/core/graphics/canvas/CanvasGraphicsRenderer.js index 6561054..868e81d 100644 --- a/src/core/graphics/canvas/CanvasGraphicsRenderer.js +++ b/src/core/graphics/canvas/CanvasGraphicsRenderer.js @@ -43,7 +43,8 @@ const resolution = renderer.resolution; // if the tint has changed, set the graphics object to dirty. - if (this._prevTint !== this.tint) { + if (this._prevTint !== this.tint) + { this.dirty = true; } @@ -83,7 +84,7 @@ for (let j = 0; j < data.holes.length; j++) { - let hole = data.holes[j]; + const hole = data.holes[j]; this.renderPolygon(hole.points, true, context); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index 913caa3..cc93eac 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -55,7 +55,8 @@ { ObjectRenderer.prototype.destroy.call(this); - for (let i = 0; i < this.graphicsDataPool.length; ++i) { + for (let i = 0; i < this.graphicsDataPool.length; ++i) + { this.graphicsDataPool[i].destroy(); } @@ -73,7 +74,6 @@ const gl = renderer.gl; let webGLData; - let webGL = graphics._webGL[this.CONTEXT_UID]; if (!webGL || graphics.dirty !== webGL.dirty ) @@ -138,7 +138,7 @@ // loop through and return all the webGLDatas to the object pool so than can be reused later on for (let i = 0; i < webGL.data.length; i++) { - let graphicsData = webGL.data[i]; + const graphicsData = webGL.data[i]; this.graphicsDataPool.push( graphicsData ); } @@ -154,7 +154,7 @@ // other wise graphics objects will be pushed into a batch.. for (let i = webGL.lastIndex; i < graphics.graphicsData.length; i++) { - let data = graphics.graphicsData[i]; + const data = graphics.graphicsData[i]; //TODO - this can be simplified webGLData = this.getWebGLData(webGL, 0); diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index df7160f..85f552d 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -45,8 +45,8 @@ lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - let midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; - let midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; + const midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; + const midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js index 1350093..86c19ca 100644 --- a/src/core/graphics/webgl/utils/buildPoly.js +++ b/src/core/graphics/webgl/utils/buildPoly.js @@ -18,16 +18,17 @@ let points = graphicsData.points; - if(graphicsData.fill && points.length >= 6) + if (graphicsData.fill && points.length >= 6) { - let holeArray = []; - // Process holes.. - let holes = graphicsData.holes; + const holeArray = []; + // Process holes.. + const holes = graphicsData.holes; - for (let i = 0; i < holes.length; i++) { + for (let i = 0; i < holes.length; i++) + { const hole = holes[i]; - holeArray.push(points.length/2); + holeArray.push(points.length / 2); points = points.concat(hole.points); } @@ -47,25 +48,26 @@ const triangles = earcut(points, holeArray, 2); - if (!triangles) { + if (!triangles) + { return; } - let vertPos = verts.length / 6; + const vertPos = verts.length / 6; - for (let i = 0; i < triangles.length; i+=3) + for (let i = 0; i < triangles.length; i += 3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); - indices.push(triangles[i+1] + vertPos); - indices.push(triangles[i+2] +vertPos); - indices.push(triangles[i+2] + vertPos); + indices.push(triangles[i + 1] + vertPos); + indices.push(triangles[i + 2] + vertPos); + indices.push(triangles[i + 2] + vertPos); } for (let i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], - r, g, b, alpha); + r, g, b, alpha); } } diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js index 4f2b93c..47ca388 100644 --- a/src/core/graphics/webgl/utils/buildRectangle.js +++ b/src/core/graphics/webgl/utils/buildRectangle.js @@ -11,7 +11,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRectangle = function (graphicsData, webGLData) +const buildRectangle = function (graphicsData, webGLData) { // --- // // need to convert points to a nice regular data @@ -55,7 +55,7 @@ if (graphicsData.lineWidth) { - let tempPoints = graphicsData.points; + const tempPoints = graphicsData.points; graphicsData.points = [x, y, x + width, y, diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js index 6c25bd9..df2858e 100644 --- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js +++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js @@ -12,7 +12,7 @@ * @param graphicsData {PIXI.WebGLGraphicsData} The graphics object containing all the necessary properties * @param webGLData {object} an object containing all the webGL-specific information to create this shape */ -let buildRoundedRectangle = function (graphicsData, webGLData) +const buildRoundedRectangle = function (graphicsData, webGLData) { const rrectData = graphicsData.shape; const x = rrectData.x; @@ -92,7 +92,7 @@ * @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=[]) +const quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out=[]) { const n = 20, points = out; @@ -104,13 +104,15 @@ x, y; - function getPt(n1 , n2, perc) { + function getPt(n1 , n2, perc) + { const diff = n2 - n1; return n1 + ( diff * perc ); } - for (let i = 0, j = 0; i <= n; i++ ) { + for (let i = 0, j = 0; i <= n; i++) + { j = i / n; // The Green Line diff --git a/src/core/math/GroupD8.js b/src/core/math/GroupD8.js index 8409544..48fb8a0 100644 --- a/src/core/math/GroupD8.js +++ b/src/core/math/GroupD8.js @@ -9,27 +9,35 @@ const mul = []; -function signum(x) { - if (x < 0) { +function signum(x) +{ + if (x < 0) + { return -1; } - if (x > 0) { + if (x > 0) + { return 1; } return 0; } -function init() { - for (let i = 0; i < 16; i++) { +function init() +{ + for (let i = 0; i < 16; i++) + { const row = []; mul.push(row); - for (let j = 0; j < 16; j++) { + for (let j = 0; j < 16; 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) { + for (let k = 0; k < 16; k++) + { + if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) + { row.push(k); break; } @@ -37,7 +45,8 @@ } } - for (let i=0;i<16;i++) { + for (let i = 0; i < 16; i++) + { const mat = new Matrix(); mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0); tempMatrices.push(mat); @@ -73,8 +82,10 @@ uY: ind => uy[ind], vX: ind => vx[ind], vY: ind => vy[ind], - inv: rotation => { - if (rotation & 8) { + inv: rotation => + { + if (rotation & 8) + { return rotation & 15; } return (-rotation) & 7; @@ -93,34 +104,49 @@ * @returns {boolean} */ isSwapWidthHeight: rotation => (rotation & 3) === 2, - byDirection: (dx, dy) => { - if (Math.abs(dx) * 2 <= Math.abs(dy)) { - if (dy >= 0) { + byDirection: (dx, dy) => + { + if (Math.abs(dx) * 2 <= Math.abs(dy)) + { + if (dy >= 0) + { return GroupD8.S; } - else { + else + { return GroupD8.N; } - } else if (Math.abs(dy) * 2 <= Math.abs(dx)) { - if (dx > 0) { + } + else if (Math.abs(dy) * 2 <= Math.abs(dx)) + { + if (dx > 0) + { return GroupD8.E; } - else { + else + { return GroupD8.W; } - } else { - if (dy > 0) { - if (dx > 0) { + } + else + { + if (dy > 0) + { + if (dx > 0) + { return GroupD8.SE; } - else { + else + { return GroupD8.SW; } } - else if (dx > 0) { + else if (dx > 0) + { return GroupD8.NE; } - else { + else + { return GroupD8.NW; } } @@ -132,7 +158,8 @@ * @param tx {number|*} sprite anchoring * @param ty {number|*} sprite anchoring */ - matrixAppendRotationInv: (matrix, rotation, tx, ty) => { + matrixAppendRotationInv: (matrix, rotation, tx, ty) => + { //Packer used "rotation", we use "inv(rotation)" const mat = tempMatrices[GroupD8.inv(rotation)]; tx = tx || 0; diff --git a/src/core/math/Matrix.js b/src/core/math/Matrix.js index b74f3a7..fc2076b 100644 --- a/src/core/math/Matrix.js +++ b/src/core/math/Matrix.js @@ -10,8 +10,7 @@ * @class * @memberof PIXI */ -class Matrix -{ +class Matrix { constructor() { /** @@ -53,383 +52,382 @@ this.array = null; } - /** - * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: - * - * a = array[0] - * b = array[1] - * c = array[3] - * d = array[4] - * tx = array[2] - * ty = array[5] - * - * @param array {number[]} The array that the matrix will be populated from. - */ - fromArray(array) - { - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; - } + /** + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] + * + * @param array {number[]} The array that the matrix will be populated from. + */ + fromArray(array) + { + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; + } - /** - * sets the matrix properties - * - * @param {number} a - * @param {number} b - * @param {number} c - * @param {number} d - * @param {number} tx - * @param {number} ty - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - set(a, b, c, d, tx, ty) - { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - this.tx = tx; - this.ty = ty; + /** + * sets the matrix properties + * + * @param {number} a + * @param {number} b + * @param {number} c + * @param {number} d + * @param {number} tx + * @param {number} ty + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + set(a, b, c, d, tx, ty) + { + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.tx = tx; + this.ty = ty; - return this; - } + return this; + } - /** - * Creates an array from the current Matrix object. - * - * @param transpose {boolean} Whether we need to transpose the matrix or not - * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out - * @return {number[]} the newly created array which contains the matrix - */ - toArray(transpose, out) - { - if (!this.array) - { - this.array = new Float32Array(9); - } + /** + * Creates an array from the current Matrix object. + * + * @param transpose {boolean} Whether we need to transpose the matrix or not + * @param [out=new Float32Array(9)] {Float32Array} If provided the array will be assigned to out + * @return {number[]} the newly created array which contains the matrix + */ + toArray(transpose, out) + { + if (!this.array) + { + this.array = new Float32Array(9); + } - let array = out || this.array; + const array = out || this.array; - if (transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } + if (transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } - return array; - } + return array; + } - /** - * Get a new position with the current transformation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, transformed through this matrix - */ - apply(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, transformed through this matrix + */ + apply(pos, newPos) + { + newPos = newPos || new Point(); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.a * x + this.c * y + this.tx; - newPos.y = this.b * x + this.d * y + this.ty; + newPos.x = this.a * x + this.c * y + this.tx; + newPos.y = this.b * x + this.d * y + this.ty; - return newPos; - } + return newPos; + } - /** - * Get a new position with the inverse of the current transformation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @param pos {PIXI.Point} The origin - * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) - * @return {PIXI.Point} The new point, inverse-transformed through this matrix - */ - applyInverse(pos, newPos) - { - newPos = newPos || new Point(); + /** + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @param pos {PIXI.Point} The origin + * @param [newPos] {PIXI.Point} The point that the new position is assigned to (allowed to be same as input) + * @return {PIXI.Point} The new point, inverse-transformed through this matrix + */ + applyInverse(pos, newPos) + { + newPos = newPos || new Point(); - let id = 1 / (this.a * this.d + this.c * -this.b); + const id = 1 / (this.a * this.d + this.c * -this.b); - let x = pos.x; - let y = pos.y; + const x = pos.x; + const y = pos.y; - newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; - newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; + newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id; - return newPos; - } + return newPos; + } - /** - * Translates the matrix on the x and y. - * - * @param {number} x How much to translate x by - * @param {number} y How much to translate y by - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - translate(x, y) - { - this.tx += x; - this.ty += y; + /** + * Translates the matrix on the x and y. + * + * @param {number} x How much to translate x by + * @param {number} y How much to translate y by + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + translate(x, y) + { + this.tx += x; + this.ty += y; - return this; - } + return this; + } - /** - * Applies a scale transformation to the matrix. - * - * @param {number} x The amount to scale horizontally - * @param {number} y The amount to scale vertically - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - scale(x, y) - { - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; + /** + * Applies a scale transformation to the matrix. + * + * @param {number} x The amount to scale horizontally + * @param {number} y The amount to scale vertically + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + scale(x, y) + { + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; - return this; - } + return this; + } - /** - * Applies a rotation transformation to the matrix. - * - * @param {number} angle - The angle in radians. - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - rotate(angle) - { - let cos = Math.cos( angle ); - let sin = Math.sin( angle ); + /** + * Applies a rotation transformation to the matrix. + * + * @param {number} angle - The angle in radians. + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + rotate(angle) + { + const cos = Math.cos(angle); + const sin = Math.sin(angle); - let a1 = this.a; - let c1 = this.c; - let tx1 = this.tx; + const a1 = this.a; + const c1 = this.c; + const tx1 = this.tx; - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; + this.a = a1 * cos - this.b * sin; + this.b = a1 * sin + this.b * cos; + this.c = c1 * cos - this.d * sin; + this.d = c1 * sin + this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; - return this; - } + return this; + } - /** - * Appends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - append(matrix) - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; + /** + * Appends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + append(matrix) + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - return this; - } + return this; + } - /** - * Sets the matrix based on all the available properties - * - * @param {number} x Position on the x axis - * @param {number} y Position on the y axis - * @param {number} pivotX Pivot on the x axis - * @param {number} pivotY Pivot on the y axis - * @param {number} scaleX Scale on the x axis - * @param {number} scaleY Scale on the y axis - * @param {number} rotation Rotation in radians - * @param {number} skewX Skew on the x axis - * @param {number} skewY Skew on the y axis - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) - { - let a, b, c, d, sr, cr, cy, sy, nsx, cx; + /** + * Sets the matrix based on all the available properties + * + * @param {number} x Position on the x axis + * @param {number} y Position on the y axis + * @param {number} pivotX Pivot on the x axis + * @param {number} pivotY Pivot on the y axis + * @param {number} scaleX Scale on the x axis + * @param {number} scaleY Scale on the y axis + * @param {number} rotation Rotation in radians + * @param {number} skewX Skew on the x axis + * @param {number} skewY Skew on the y axis + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) + { - sr = Math.sin(rotation); - cr = Math.cos(rotation); - cy = Math.cos(skewY); - sy = Math.sin(skewY); - nsx = -Math.sin(skewX); - cx = Math.cos(skewX); + const sr = Math.sin(rotation); + const cr = Math.cos(rotation); + const cy = Math.cos(skewY); + const sy = Math.sin(skewY); + const nsx = -Math.sin(skewX); + const cx = Math.cos(skewX); - a = cr * scaleX; - b = sr * scaleX; - c = -sr * scaleY; - d = cr * scaleY; + const a = cr * scaleX; + const b = sr * scaleX; + const c = -sr * scaleY; + const d = cr * scaleY; - this.a = cy * a + sy * c; - this.b = cy * b + sy * d; - this.c = nsx * a + cx * c; - this.d = nsx * b + cx * d; + this.a = cy * a + sy * c; + this.b = cy * b + sy * d; + this.c = nsx * a + cx * c; + this.d = nsx * b + cx * d; - this.tx = x + ( pivotX * a + pivotY * c ); - this.ty = y + ( pivotX * b + pivotY * d ); + this.tx = x + ( pivotX * a + pivotY * c ); + this.ty = y + ( pivotX * b + pivotY * d ); - return this; - } + return this; + } - /** - * Prepends the given Matrix to this Matrix. - * - * @param {PIXI.Matrix} matrix - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - prepend(matrix) - { - let tx1 = this.tx; + /** + * Prepends the given Matrix to this Matrix. + * + * @param {PIXI.Matrix} matrix + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + prepend(matrix) + { + const tx1 = this.tx; - if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) - { - let a1 = this.a; - let c1 = this.c; - this.a = a1*matrix.a+this.b*matrix.c; - this.b = a1*matrix.b+this.b*matrix.d; - this.c = c1*matrix.a+this.d*matrix.c; - this.d = c1*matrix.b+this.d*matrix.d; - } + if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) + { + const a1 = this.a; + const c1 = this.c; + this.a = a1 * matrix.a + this.b * matrix.c; + this.b = a1 * matrix.b + this.b * matrix.d; + this.c = c1 * matrix.a + this.d * matrix.c; + this.d = c1 * matrix.b + this.d * matrix.d; + } - this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx; - this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty; + this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx; + this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty; - return this; - } + return this; + } - /** - * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. - * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. - * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies - */ - decompose(transform) - { - // sort out rotation / skew.. - let a = this.a, - b = this.b, - c = this.c, - d = this.d; + /** + * Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform. + * @param transform {PIXI.Transform|PIXI.TransformStatic} the transform to apply the properties to. + * @return {PIXI.Transform|PIXI.TransformStatic} The transform with the newly applied properies + */ + decompose(transform) + { + // sort out rotation / skew.. + const a = this.a; + const b = this.b; + const c = this.c; + const d = this.d; - let skewX = Math.atan2(-c, d); - let skewY = Math.atan2(b, a); + const skewX = Math.atan2(-c, d); + const skewY = Math.atan2(b, a); - let delta = Math.abs(1-skewX/skewY); + const delta = Math.abs(1 - skewX / skewY); - if (delta < 0.00001) - { - transform.rotation = skewY; + if (delta < 0.00001) + { + transform.rotation = skewY; - if (a < 0 && d >= 0) - { - transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; - } + if (a < 0 && d >= 0) + { + transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI; + } - transform.skew.x = transform.skew.y = 0; + transform.skew.x = transform.skew.y = 0; - } - else - { - transform.skew.x = skewX; - transform.skew.y = skewY; - } + } + else + { + transform.skew.x = skewX; + transform.skew.y = skewY; + } - // next set scale - transform.scale.x = Math.sqrt(a * a + b * b); - transform.scale.y = Math.sqrt(c * c + d * d); + // next set scale + transform.scale.x = Math.sqrt(a * a + b * b); + transform.scale.y = Math.sqrt(c * c + d * d); - // next set position - transform.position.x = this.tx; - transform.position.y = this.ty; + // next set position + transform.position.x = this.tx; + transform.position.y = this.ty; - return transform; - } + return transform; + } - /** - * Inverts this matrix - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - invert() - { - let a1 = this.a; - let b1 = this.b; - let c1 = this.c; - let d1 = this.d; - let tx1 = this.tx; - let n = a1*d1-b1*c1; + /** + * Inverts this matrix + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + invert() + { + const a1 = this.a; + const b1 = this.b; + const c1 = this.c; + const d1 = this.d; + const tx1 = this.tx; + const n = a1 * d1 - b1 * c1; - this.a = d1/n; - this.b = -b1/n; - this.c = -c1/n; - this.d = a1/n; - this.tx = (c1*this.ty-d1*tx1)/n; - this.ty = -(a1*this.ty-b1*tx1)/n; + this.a = d1 / n; + this.b = -b1 / n; + this.c = -c1 / n; + this.d = a1 / n; + this.tx = (c1 * this.ty - d1 * tx1) / n; + this.ty = -(a1 * this.ty - b1 * tx1) / n; - return this; - } + return this; + } - /** - * Resets this Matix to an identity (default) matrix. - * - * @return {PIXI.Matrix} This matrix. Good for chaining method calls. - */ - identity() - { - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; + /** + * Resets this Matix to an identity (default) matrix. + * + * @return {PIXI.Matrix} This matrix. Good for chaining method calls. + */ + identity() + { + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; - return this; - } + return this; + } /** * Creates a new Matrix object with the same values as this one. @@ -438,7 +436,7 @@ */ clone() { - let matrix = new Matrix(); + const matrix = new Matrix(); matrix.a = this.a; matrix.b = this.b; matrix.c = this.c; @@ -472,8 +470,9 @@ * @static * @const */ - static get IDENTITY() { - return new Matrix(); + static get IDENTITY() + { + return new Matrix(); } /** @@ -482,8 +481,9 @@ * @static * @const */ - static get TEMP_MATRIX() { - return new Matrix(); + static get TEMP_MATRIX() + { + return new Matrix(); } } diff --git a/src/core/math/ObservablePoint.js b/src/core/math/ObservablePoint.js index c19660e..6dc1c33 100644 --- a/src/core/math/ObservablePoint.js +++ b/src/core/math/ObservablePoint.js @@ -12,10 +12,10 @@ */ class ObservablePoint { - constructor(cb, scope, x, y) + constructor(cb, scope, x = 0, y = 0) { - this._x = x || 0; - this._y = y || 0; + this._x = x; + this._y = y; this.cb = cb; this.scope = scope; @@ -30,8 +30,8 @@ */ set(x, y) { - let _x = x || 0; - let _y = y || ( (y !== 0) ? _x : 0 ); + const _x = x || 0; + const _y = y || ( (y !== 0) ? _x : 0 ); if (this._x !== _x || this._y !== _y) { this._x = _x; @@ -65,9 +65,11 @@ { return this._x; } + set x(value) { - if (this._x !== value) { + if (this._x !== value) + { this._x = value; this.cb.call(this.scope); } @@ -83,13 +85,15 @@ { return this._y; } + set y(value) { - if (this._y !== value) { + if (this._y !== value) + { this._y = value; this.cb.call(this.scope); } } } -export default ObservablePoint; \ No newline at end of file +export default ObservablePoint; diff --git a/src/core/math/Point.js b/src/core/math/Point.js index 3a392d0..3b8edfc 100644 --- a/src/core/math/Point.js +++ b/src/core/math/Point.js @@ -9,19 +9,19 @@ */ class Point { - constructor(x, y) + constructor(x = 0, y = 0) { /** * @member {number} * @default 0 */ - this.x = x || 0; + this.x = x; /** * @member {number} * @default 0 */ - this.y = y || 0; + this.y = y; } /** @@ -39,7 +39,8 @@ * * @param p {PIXI.Point} */ - copy(p) { + copy(p) + { this.set(p.x, p.y); } @@ -49,7 +50,8 @@ * @param p {PIXI.Point} * @returns {boolean} Whether the given point equal to this point */ - equals(p) { + equals(p) + { return (p.x === this.x) && (p.y === this.y); } @@ -63,9 +65,9 @@ set(x, y) { this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; + this.y = y || ( (y !== 0) ? this.x : 0 ); } } -export default Point; \ No newline at end of file +export default Point; diff --git a/src/core/math/shapes/Polygon.js b/src/core/math/shapes/Polygon.js index b8ca33c..60adb30 100644 --- a/src/core/math/shapes/Polygon.js +++ b/src/core/math/shapes/Polygon.js @@ -25,7 +25,8 @@ // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); - for (let a = 0; a < points.length; ++a) { + for (let a = 0; a < points.length; ++a) + { points[a] = arguments[a]; } } @@ -76,7 +77,7 @@ close() { - let points = this.points; + const points = this.points; // close the poly if the value is true! if (points[0] !== points[points.length-2] || points[1] !== points[points.length-1]) diff --git a/src/core/math/shapes/Rectangle.js b/src/core/math/shapes/Rectangle.js index 5dd5192..e60962c 100644 --- a/src/core/math/shapes/Rectangle.js +++ b/src/core/math/shapes/Rectangle.js @@ -12,7 +12,7 @@ */ class Rectangle { - constructor(x=0, y=0, width=0, height=0) + constructor(x = 0, y = 0, width = 0, height = 0) { /** * @member {number} @@ -55,7 +55,7 @@ * @member {number} * @memberof PIXI.Rectangle# */ - get left () + get left() { return this.x; } @@ -66,7 +66,7 @@ * @member {number} * @memberof PIXI.Rectangle */ - get right () + get right() { return this.x + this.width; } @@ -99,7 +99,8 @@ * @static * @constant */ - static get EMPTY() { + static get EMPTY() + { return new Rectangle(0, 0, 0, 0); } @@ -165,8 +166,9 @@ if (this.x < rectangle.x) { this.width += this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } this.x = rectangle.x; @@ -175,25 +177,28 @@ if (this.y < rectangle.y) { this.height += this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } this.y = rectangle.y; } - if ( this.x + this.width > rectangle.x + rectangle.width ) + if (this.x + this.width > rectangle.x + rectangle.width) { this.width = rectangle.width - this.x; - if(this.width < 0) { - this.width = 0; + if (this.width < 0) + { + this.width = 0; } } - if ( this.y + this.height > rectangle.y + rectangle.height ) + if (this.y + this.height > rectangle.y + rectangle.height) { this.height = rectangle.height - this.y; - if(this.height < 0) { - this.height = 0; + if (this.height < 0) + { + this.height = 0; } } } @@ -206,10 +211,10 @@ return; } - let x1 = Math.min(this.x, rect.x); - let x2 = Math.max(this.x + this.width, rect.x + rect.width); - let y1 = Math.min(this.y, rect.y); - let y2 = Math.max(this.y + this.height, rect.y + rect.height); + const x1 = Math.min(this.x, rect.x); + const x2 = Math.max(this.x + this.width, rect.x + rect.width); + const y1 = Math.min(this.y, rect.y); + const y2 = Math.max(this.y + this.height, rect.y + rect.height); this.x = x1; this.width = x2 - x1; this.y = y1; diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 1c7588c..a3cc3a2 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -27,8 +27,7 @@ * @param [options.backgroundColor=0x000000] {number} The background color of the rendered area (shown if not transparent). * @param [options.roundPixels=false] {boolean} If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. */ -class SystemRenderer extends EventEmitter -{ +class SystemRenderer extends EventEmitter { constructor(system, width, height, options) { super(); @@ -38,7 +37,7 @@ // prepare options if (options) { - for (let i in CONST.DEFAULT_RENDER_OPTIONS) + for (const i in CONST.DEFAULT_RENDER_OPTIONS) { if (typeof options[i] === 'undefined') { @@ -187,7 +186,8 @@ * @param width {number} the new width of the canvas view * @param height {number} the new height of the canvas view */ - resize(width, height) { + resize(width, height) + { this.width = width * this.resolution; this.height = height * this.resolution; @@ -210,7 +210,8 @@ * @param resolution {number} The resolution / device pixel ratio of the texture being generated * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) { + generateTexture(displayObject, scaleMode, resolution) + { const bounds = displayObject.getLocalBounds(); @@ -229,7 +230,8 @@ * * @param [removeView=false] {boolean} Removes the Canvas element from the DOM. */ - destroy(removeView) { + destroy(removeView) + { if (removeView && this.view.parentNode) { this.view.parentNode.removeChild(this.view); @@ -274,6 +276,7 @@ { return this._backgroundColor; } + set backgroundColor(val) { this._backgroundColor = val; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index b7d60e0..c066f32 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -26,7 +26,7 @@ */ class CanvasRenderer extends SystemRenderer { - constructor(width, height, options={}) + constructor(width, height, options = {}) { super('Canvas', width, height, options); @@ -38,7 +38,7 @@ * * @member {CanvasRenderingContext2D} */ - this.rootContext = this.view.getContext('2d', { alpha: this.transparent }); + this.rootContext = this.view.getContext('2d', {alpha: this.transparent}); this.rootResolution = this.resolution; /** @@ -105,20 +105,21 @@ render(displayObject, renderTexture, clear, transform, skipUpdateTransform) { - if (!this.view){ - return; + if (!this.view) + { + return; } - // can be handy to know! + // can be handy to know! this.renderingToScreen = !renderTexture; this.emit('prerender'); - if(renderTexture) + if (renderTexture) { renderTexture = renderTexture.baseTexture || renderTexture; - if(!renderTexture._canvasRenderTarget) + if (!renderTexture._canvasRenderTarget) { renderTexture._canvasRenderTarget = new CanvasRenderTarget(renderTexture.width, renderTexture.height, renderTexture.resolution); @@ -138,19 +139,19 @@ const context = this.context; - if(!renderTexture) + if (!renderTexture) { this._lastObjectRendered = displayObject; } - if(!skipUpdateTransform) + if (!skipUpdateTransform) { // update the scene graph const cacheParent = displayObject.parent; const tempWt = this._tempDisplayObjectParent.transform.worldTransform; - if(transform) + if (transform) { transform.copy(tempWt); } @@ -162,7 +163,7 @@ displayObject.parent = this._tempDisplayObjectParent; displayObject.updateTransform(); displayObject.parent = cacheParent; - // displayObject.hitArea = //TODO add a temp hit area + // displayObject.hitArea = //TODO add a temp hit area } @@ -176,18 +177,21 @@ context.clear(); } - if(clear !== undefined ? clear : this.clearBeforeRender) + if (clear !== undefined ? clear : this.clearBeforeRender) { - if (this.renderingToScreen) { - if (this.transparent) { + if (this.renderingToScreen) + { + if (this.transparent) + { context.clearRect(0, 0, this.width, this.height); } - else { + else + { context.fillStyle = this._backgroundColorString; context.fillRect(0, 0, this.width, this.height); } } //else { - //TODO: implement background for CanvasRenderTarget or RenderTexture? + //TODO: implement background for CanvasRenderTarget or RenderTexture? //} } @@ -204,8 +208,9 @@ setBlendMode(blendMode) { - if(this._activeBlendMode === blendMode) { - return; + if (this._activeBlendMode === blendMode) + { + return; } this.context.globalCompositeOperation = this.blendModes[blendMode]; @@ -247,7 +252,7 @@ //reset the scale mode.. oddly this seems to be reset when the canvas is resized. //surely a browser bug?? Let pixi fix that for you.. - if(this.smoothProperty) + if (this.smoothProperty) { this.rootContext[this.smoothProperty] = (CONST.SCALE_MODES.DEFAULT === CONST.SCALE_MODES.LINEAR); } diff --git a/src/core/renderers/canvas/utils/CanvasMaskManager.js b/src/core/renderers/canvas/utils/CanvasMaskManager.js index 3deb1ce..5bf0998 100644 --- a/src/core/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/core/renderers/canvas/utils/CanvasMaskManager.js @@ -157,7 +157,8 @@ renderer.context.restore(); } - destroy() {} + destroy() + {} } export default CanvasMaskManager; diff --git a/src/core/renderers/webgl/TextureGarbageCollector.js b/src/core/renderers/webgl/TextureGarbageCollector.js index 68ac685..df86f33 100644 --- a/src/core/renderers/webgl/TextureGarbageCollector.js +++ b/src/core/renderers/webgl/TextureGarbageCollector.js @@ -57,7 +57,7 @@ for (let i = 0; i < managedTextures.length; i++) { - let texture = managedTextures[i]; + const texture = managedTextures[i]; // only supports non generated textures at the moment! if (!texture._glRenderTargets && this.count - texture.touched > this.maxIdle) @@ -97,10 +97,9 @@ tm.destroyTexture(displayObject._texture, true); } - for (let i = displayObject.children.length - 1; i >= 0; i--) { - + for (let i = displayObject.children.length - 1; i >= 0; i--) + { this.unload(displayObject.children[i]); - } } } diff --git a/src/core/renderers/webgl/TextureManager.js b/src/core/renderers/webgl/TextureManager.js index 3286672..938b543 100644 --- a/src/core/renderers/webgl/TextureManager.js +++ b/src/core/renderers/webgl/TextureManager.js @@ -164,7 +164,8 @@ if (!skipRemove) { const i = this._managedTextures.indexOf(texture); - if (i !== -1) { + if (i !== -1) + { utils.removeItems(this._managedTextures, i, 1); } } diff --git a/src/core/renderers/webgl/WebGLState.js b/src/core/renderers/webgl/WebGLState.js index 3e695de..e7bfd5f 100755 --- a/src/core/renderers/webgl/WebGLState.js +++ b/src/core/renderers/webgl/WebGLState.js @@ -59,8 +59,10 @@ this.maxAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); - this.attribState = {tempAttribState:new Array(this.maxAttribs), - attribState:new Array(this.maxAttribs)}; + this.attribState = { + tempAttribState: new Array(this.maxAttribs), + attribState: new Array(this.maxAttribs) + }; this.blendModes = mapWebGLBlendModesToPixi(gl); @@ -80,7 +82,7 @@ // next state.. let state = this.stack[++this.stackIndex]; - if(!state) + if (!state) { state = this.stack[this.stackIndex] = new Uint8Array(16); } @@ -121,10 +123,11 @@ */ setBlend(value) { - if(this.activeState[BLEND] === value|0) { + if (this.activeState[BLEND] === value | 0) + { return; } - this.activeState[BLEND] = value|0; + this.activeState[BLEND] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.BLEND); } @@ -134,7 +137,8 @@ */ setBlendMode(value) { - if(value === this.activeState[BLEND_FUNC]) { + if (value === this.activeState[BLEND_FUNC]) + { return; } @@ -149,11 +153,12 @@ */ setDepthTest(value) { - if(this.activeState[DEPTH_TEST] === value|0) { + if (this.activeState[DEPTH_TEST] === value | 0) + { return; } - this.activeState[DEPTH_TEST] = value|0; + this.activeState[DEPTH_TEST] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.DEPTH_TEST); } @@ -163,11 +168,12 @@ */ setCullFace(value) { - if(this.activeState[CULL_FACE] === value|0) { + if (this.activeState[CULL_FACE] === value | 0) + { return; } - this.activeState[CULL_FACE] = value|0; + this.activeState[CULL_FACE] = value | 0; this.gl[value ? 'enable' : 'disable'](this.gl.CULL_FACE); } @@ -177,11 +183,12 @@ */ setFrontFace(value) { - if(this.activeState[FRONT_FACE] === value|0) { + if (this.activeState[FRONT_FACE] === value | 0) + { return; } - this.activeState[FRONT_FACE] = value|0; + this.activeState[FRONT_FACE] = value | 0; this.gl.frontFace(this.gl[value ? 'CW' : 'CCW']); } @@ -191,11 +198,13 @@ resetAttributes() { - for (let i = 0; i < this.attribState.tempAttribState.length; i++) { + for (let i = 0; i < this.attribState.tempAttribState.length; i++) + { this.attribState.tempAttribState[i] = 0; } - for (let i = 0; i < this.attribState.attribState.length; i++) { + for (let i = 0; i < this.attribState.attribState.length; i++) + { this.attribState.attribState[i] = 0; } @@ -214,7 +223,7 @@ { // unbind any VAO if they exist.. - if(this.nativeVaoExtension) + if (this.nativeVaoExtension) { this.nativeVaoExtension.bindVertexArrayOES(null); } diff --git a/src/core/renderers/webgl/filters/Filter.js b/src/core/renderers/webgl/filters/Filter.js index 3b94350..697d67c 100644 --- a/src/core/renderers/webgl/filters/Filter.js +++ b/src/core/renderers/webgl/filters/Filter.js @@ -13,8 +13,7 @@ * @param [fragmentSrc] {string} The source of the fragment shader. * @param [uniforms] {object} Custom uniforms to use to augment the built-in ones. */ -class Filter -{ +class Filter { constructor(vertexSrc, fragmentSrc, uniforms) { @@ -36,11 +35,11 @@ // pull out the vertex and shader uniforms if they are not specified.. // currently this does not extract structs only default types - this.uniformData = uniforms || extractUniformsFromSrc( this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); this.uniforms = {}; - for (let i in this.uniformData) + for (const i in this.uniformData) { this.uniforms[i] = this.uniformData[i].value; } @@ -50,7 +49,7 @@ this.glShaders = []; // used for cacheing.. sure there is a better way! - if(!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) + if (!SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc]) { SOURCE_KEY_MAP[this.vertexSrc + this.fragmentSrc] = utils.uid(); } @@ -80,7 +79,7 @@ apply(filterManager, input, output, clear) { // --- // - // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); + // this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(tempMatrix, window.panda ); // do as you please! @@ -95,7 +94,8 @@ * @static * @constant */ - static get defaultVertexSrc() { + static get defaultVertexSrc() + { return [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -120,7 +120,8 @@ * @static * @constant */ - static get defaultFragmentSrc() { + static get defaultFragmentSrc() + { return [ 'varying vec2 vTextureCoord;', 'varying vec2 vFilterCoord;', @@ -140,13 +141,12 @@ ' {', ' color = vec4(0.0, 1.0, 0.0, 1.0);', ' }', - // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', + // ' gl_FragColor = vec4(mod(vFilterCoord.x, 1.5), vFilterCoord.y,0.0,1.0);', ' gl_FragColor = mix(sample, masky, 0.5);', ' gl_FragColor *= sample.a;', '}' ].join('\n'); } - } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js index 80276b3..e8d2676 100644 --- a/src/core/renderers/webgl/filters/extractUniformsFromSrc.js +++ b/src/core/renderers/webgl/filters/extractUniformsFromSrc.js @@ -27,7 +27,7 @@ // loop through.. for (let i = 0; i < lines.length; i++) { - let line = lines[i].trim(); + const line = lines[i].trim(); if(line.indexOf('uniform') > -1) { diff --git a/src/core/renderers/webgl/filters/filterTransforms.js b/src/core/renderers/webgl/filters/filterTransforms.js index b51fabf..0bc2a9a 100644 --- a/src/core/renderers/webgl/filters/filterTransforms.js +++ b/src/core/renderers/webgl/filters/filterTransforms.js @@ -30,8 +30,8 @@ mappedMatrix.translate(filterArea.x / textureSize.width, filterArea.y / textureSize.height ); - let translateScaleX = (textureSize.width / filterArea.width); - let translateScaleY = (textureSize.height / filterArea.height); + const translateScaleX = (textureSize.width / filterArea.width); + const translateScaleY = (textureSize.height / filterArea.height); mappedMatrix.scale( translateScaleX , translateScaleY ); diff --git a/src/core/renderers/webgl/managers/FilterManager.js b/src/core/renderers/webgl/managers/FilterManager.js index 8c8a105..732e705 100644 --- a/src/core/renderers/webgl/managers/FilterManager.js +++ b/src/core/renderers/webgl/managers/FilterManager.js @@ -151,7 +151,7 @@ { filters[i].apply(this, flip, flop, true); - let t = flip; + const t = flip; flip = flop; flop = t; } @@ -242,7 +242,7 @@ if(shader.uniforms.data.filterArea) { currentState = this.filterData.stack[this.filterData.index]; - let filterArea = shader.uniforms.filterArea; + const filterArea = shader.uniforms.filterArea; filterArea[0] = currentState.renderTarget.size.width; filterArea[1] = currentState.renderTarget.size.height; @@ -257,7 +257,7 @@ if(shader.uniforms.data.filterClamp) { currentState = this.filterData.stack[this.filterData.index]; - let filterClamp = shader.uniforms.filterClamp; + const filterClamp = shader.uniforms.filterClamp; filterClamp[0] = 0.5 / currentState.renderTarget.size.width; filterClamp[1] = 0.5 / currentState.renderTarget.size.height; @@ -269,7 +269,7 @@ let val; //TODO Cacheing layer.. - for(let i in uniformData) + for(const i in uniformData) { if(uniformData[i].type === 'sampler2D') { @@ -400,7 +400,8 @@ const key = ((minWidth & 0xFFFF) << 16) | ( minHeight & 0xFFFF); - if(!this.pool[key]) { + if(!this.pool[key]) + { this.pool[key] = []; } @@ -416,9 +417,9 @@ emptyPool() { - for (let i in this.pool) + for (const i in this.pool) { - let textures = this.pool[i]; + const textures = this.pool[i]; if(textures) { for (let j = 0; j < textures.length; j++) diff --git a/src/core/renderers/webgl/managers/MaskManager.js b/src/core/renderers/webgl/managers/MaskManager.js index 1b9b6db..efafc14 100644 --- a/src/core/renderers/webgl/managers/MaskManager.js +++ b/src/core/renderers/webgl/managers/MaskManager.js @@ -164,7 +164,7 @@ this.renderer.gl.enable(this.renderer.gl.SCISSOR_TEST); - let resolution = this.renderer.resolution; + const resolution = this.renderer.resolution; this.renderer.gl.scissor(bounds.x * resolution, (renderTarget.root ? renderTarget.size.height - bounds.y - bounds.height : bounds.y) * resolution, bounds.width * resolution, diff --git a/src/core/renderers/webgl/utils/Quad.js b/src/core/renderers/webgl/utils/Quad.js index b15ea3d..dabea4f 100644 --- a/src/core/renderers/webgl/utils/Quad.js +++ b/src/core/renderers/webgl/utils/Quad.js @@ -46,7 +46,8 @@ this.interleaved = new Float32Array(8 * 2); - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -145,7 +146,8 @@ */ upload() { - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) + { this.interleaved[i*4] = this.vertices[(i*2)]; this.interleaved[(i*4)+1] = this.vertices[(i*2)+1]; this.interleaved[(i*4)+2] = this.uvs[i*2]; @@ -162,11 +164,11 @@ */ destroy() { - let gl = this.gl; + const gl = this.gl; gl.deleteBuffer(this.vertexBuffer); gl.deleteBuffer(this.indexBuffer); } } -export default Quad; \ No newline at end of file +export default Quad; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index cb631ea..60f413d 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -295,7 +295,7 @@ this.frameBuffer.resize(width * this.resolution, height * this.resolution); - let projectionFrame = this.frame || this.size; + const projectionFrame = this.frame || this.size; this.calculateProjection( projectionFrame ); } diff --git a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js index 0096d21..10f4a33 100644 --- a/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js +++ b/src/core/renderers/webgl/utils/checkMaxIfStatmentsInShader.js @@ -15,7 +15,7 @@ if(createTempContext) { - let tinyCanvas = document.createElement('canvas'); + const tinyCanvas = document.createElement('canvas'); tinyCanvas.width = 1; tinyCanvas.height = 1; diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index f33d93c..4974390 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -212,20 +212,19 @@ } // lets do some special trim code! - let texture = this._texture, - vertexData = this.vertexTrimmedData, - orig = texture.orig; + const texture = this._texture; + const vertexData = this.vertexTrimmedData; + const orig = texture.orig; // lets calculate the new untrimmed bounds.. 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; + const w0 = (orig.width ) * (1-this.anchor._x); + const w1 = (orig.width ) * -this.anchor._x; - h0 = orig.height * (1-this.anchor._y); - h1 = orig.height * -this.anchor._y; + const h0 = orig.height * (1-this.anchor._y); + const h1 = orig.height * -this.anchor._y; // xy vertexData[0] = a * w1 + c * h1 + tx; @@ -278,8 +277,8 @@ orig = this._texture.orig; //First lets check to see if the current texture has a trim.. - if (!trim || trim.width === orig.width && trim.height === orig.height) { - + if (!trim || trim.width === orig.width && trim.height === orig.height) + { // no trim! lets use the usual calculations.. this.calculateVertices(); this._bounds.addQuad(this.vertexData); diff --git a/src/core/sprites/canvas/CanvasSpriteRenderer.js b/src/core/sprites/canvas/CanvasSpriteRenderer.js index d48d3b4..cbb8f07 100644 --- a/src/core/sprites/canvas/CanvasSpriteRenderer.js +++ b/src/core/sprites/canvas/CanvasSpriteRenderer.js @@ -39,13 +39,14 @@ */ render(sprite) { - const texture = sprite._texture, - renderer = this.renderer; + const texture = sprite._texture; + const renderer = this.renderer; + + const width = texture._frame.width; + const height = texture._frame.height; + let wt = sprite.transform.worldTransform, - dx, - dy, - width = texture._frame.width, - height = texture._frame.height; + dx, dy; if (texture.orig.width <= 0 || texture.orig.height <= 0 || !texture.baseTexture.source) { @@ -66,14 +67,18 @@ renderer.context[renderer.smoothProperty] = smoothingEnabled; } - if (texture.trim) { + if (texture.trim) + { dx = texture.trim.width/2 + texture.trim.x - sprite.anchor.x * texture.orig.width; dy = texture.trim.height/2 + texture.trim.y - sprite.anchor.y * texture.orig.height; - } else { + } + else + { dx = (0.5 - sprite.anchor.x) * texture.orig.width; dy = (0.5 - sprite.anchor.y) * texture.orig.height; } - if(texture.rotate) { + if(texture.rotate) + { wt.copy(canvasRenderWorldTransform); wt = canvasRenderWorldTransform; math.GroupD8.matrixAppendRotationInv(wt, texture.rotate, dx, dy); diff --git a/src/core/sprites/canvas/CanvasTinter.js b/src/core/sprites/canvas/CanvasTinter.js index f7157ce..b741e4a 100644 --- a/src/core/sprites/canvas/CanvasTinter.js +++ b/src/core/sprites/canvas/CanvasTinter.js @@ -15,7 +15,8 @@ * @param color {number} the color to use to tint the sprite with * @return {HTMLCanvasElement} The tinted canvas */ - getTintedTexture: (sprite, color) => { + getTintedTexture: (sprite, color) => + { const texture = sprite.texture; color = CanvasTinter.roundColor(color); @@ -61,8 +62,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithMultiply: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithMultiply: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -117,7 +119,7 @@ */ tintWithOverlay (texture, color, canvas) { - const context = canvas.getContext( '2d' ); + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -157,8 +159,9 @@ * @param color {number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ - tintWithPerPixel: (texture, color, canvas) => { - const context = canvas.getContext( '2d' ); + tintWithPerPixel: (texture, color, canvas) => + { + const context = canvas.getContext('2d'); const crop = texture._frame.clone(); const resolution = texture.baseTexture.resolution; @@ -192,9 +195,9 @@ for (let i = 0; i < pixels.length; i += 4) { - pixels[i+0] *= r; - pixels[i+1] *= g; - pixels[i+2] *= b; + pixels[i + 0] *= r; + pixels[i + 1] *= g; + pixels[i + 2] *= b; } context.putImageData(pixelData, 0, 0); @@ -206,7 +209,8 @@ * @memberof PIXI.CanvasTinter * @param color {number} the color to round, should be a hex color */ - roundColor: (color) => { + roundColor: (color) => + { const step = CanvasTinter.cacheStepsPerColorChannel; const rgbValues = utils.hex2rgb(color); @@ -251,7 +255,7 @@ tintMethod: 0 }; -CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; +CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply : CanvasTinter.tintWithPerPixel; /** * The tintMethod type. diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 34d43c2..60267d1 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -51,7 +51,8 @@ // let numVerts = this.size * 4 * this.vertByteSize; this.buffers = []; - for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i*=2) { + for (let i = 1; i <= bitTwiddle.nextPow2(this.size); i *= 2) + { const numVertsTemp = i * 4 * this.vertByteSize; this.buffers.push(new Buffer(numVertsTemp)); } @@ -72,12 +73,12 @@ this.shaders = null; this.currentIndex = 0; - TICK =0; + TICK = 0; this.groups = []; for (let k = 0; k < this.size; k++) { - this.groups[k] = {textures:[], textureCount:0, ids:[], size:0, start:0, blend:0}; + this.groups[k] = {textures: [], textureCount: 0, ids: [], size: 0, start: 0, blend: 0}; } this.sprites = []; @@ -104,7 +105,7 @@ this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), CONST.SPRITE_MAX_TEXTURES); // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader( this.MAX_TEXTURES, gl ); + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); this.shaders = new Array(this.MAX_TEXTURES); this.shaders[0] = generateMultiTextureShader(gl, 1); @@ -117,16 +118,17 @@ // as it is not used by the shader so is optimized out. const shader = this.shaders[1]; - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[i] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[i], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[i], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vao = this.vaos[0]; @@ -173,8 +175,9 @@ */ flush() { - if (this.currentIndex === 0) { - return; + if (this.currentIndex === 0) + { + return; } const gl = this.renderer.gl; @@ -214,11 +217,11 @@ { // upload the sprite elemetns... // they have all ready been calculated so we just need to push them into the buffer. - let sprite = sprites[i]; + const sprite = sprites[i]; nextTexture = sprite._texture.baseTexture; - if(blendMode !== sprite.blendMode) + if (blendMode !== sprite.blendMode) { blendMode = sprite.blendMode; @@ -228,13 +231,13 @@ TICK++; } - if(currentTexture !== nextTexture) + if (currentTexture !== nextTexture) { currentTexture = nextTexture; - if(nextTexture._enabled !== TICK) + if (nextTexture._enabled !== TICK) { - if(textureCount === this.MAX_TEXTURES) + if (textureCount === this.MAX_TEXTURES) { TICK++; @@ -270,47 +273,47 @@ //xy float32View[index] = ((vertexData[0] * resolution) | 0) / resolution; - float32View[index+1] = ((vertexData[1] * resolution) | 0) / resolution; + float32View[index + 1] = ((vertexData[1] * resolution) | 0) / resolution; // xy - float32View[index+5] = ((vertexData[2] * resolution) | 0) / resolution; - float32View[index+6] = ((vertexData[3] * resolution) | 0) / resolution; - - // xy - float32View[index+10] = ((vertexData[4] * resolution) | 0) / resolution; - float32View[index+11] = ((vertexData[5] * resolution) | 0) / resolution; + float32View[index + 5] = ((vertexData[2] * resolution) | 0) / resolution; + float32View[index + 6] = ((vertexData[3] * resolution) | 0) / resolution; // xy - float32View[index+15] = ((vertexData[6] * resolution) | 0) / resolution; - float32View[index+16] = ((vertexData[7] * resolution) | 0) / resolution; + float32View[index + 10] = ((vertexData[4] * resolution) | 0) / resolution; + float32View[index + 11] = ((vertexData[5] * resolution) | 0) / resolution; + + // xy + float32View[index + 15] = ((vertexData[6] * resolution) | 0) / resolution; + float32View[index + 16] = ((vertexData[7] * resolution) | 0) / resolution; } else { //xy float32View[index] = vertexData[0]; - float32View[index+1] = vertexData[1]; + float32View[index + 1] = vertexData[1]; // xy - float32View[index+5] = vertexData[2]; - float32View[index+6] = vertexData[3]; - - // xy - float32View[index+10] = vertexData[4]; - float32View[index+11] = vertexData[5]; + float32View[index + 5] = vertexData[2]; + float32View[index + 6] = vertexData[3]; // xy - float32View[index+15] = vertexData[6]; - float32View[index+16] = vertexData[7]; + float32View[index + 10] = vertexData[4]; + float32View[index + 11] = vertexData[5]; + + // xy + float32View[index + 15] = vertexData[6]; + float32View[index + 16] = vertexData[7]; } - uint32View[index+2] = uvs[0]; - uint32View[index+7] = uvs[1]; - uint32View[index+12] = uvs[2]; - uint32View[index+17] = uvs[3]; + uint32View[index + 2] = uvs[0]; + uint32View[index + 7] = uvs[1]; + uint32View[index + 12] = uvs[2]; + uint32View[index + 17] = uvs[3]; - uint32View[index+3] = uint32View[index+8] = uint32View[index+13] = uint32View[index+18] = tint; - float32View[index+4] = float32View[index+9] = float32View[index+14] = float32View[index+19] = textureId; + uint32View[index + 3] = uint32View[index + 8] = uint32View[index + 13] = uint32View[index + 18] = tint; + float32View[index + 4] = float32View[index + 9] = float32View[index + 14] = float32View[index + 19] = textureId; index += 20; } @@ -319,33 +322,34 @@ this.vertexCount++; - if(this.vaoMax <= this.vertexCount) + if (this.vaoMax <= this.vertexCount) { this.vaoMax++; shader = this.shaders[1]; this.vertexBuffers[this.vertexCount] = glCore.GLBuffer.createVertexBuffer(gl, null, gl.STREAM_DRAW); // build the vao object that will render.. this.vaos[this.vertexCount] = this.renderer.createVao() - .addIndex(this.indexBuffer) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) - .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); + .addIndex(this.indexBuffer) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aVertexPosition, gl.FLOAT, false, this.vertByteSize, 0) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureCoord, gl.UNSIGNED_SHORT, true, this.vertByteSize, 2 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aColor, gl.UNSIGNED_BYTE, true, this.vertByteSize, 3 * 4) + .addAttribute(this.vertexBuffers[this.vertexCount], shader.attributes.aTextureId, gl.FLOAT, false, this.vertByteSize, 4 * 4); } this.vertexBuffers[this.vertexCount].upload(buffer.vertices, 0); this.vao = this.vaos[this.vertexCount].bind(); /// render the groups.. - for (i = 0; i < groupCount; i++) { + for (i = 0; i < groupCount; i++) + { const group = groups[i]; const groupTextureCount = group.textureCount; - shader = this.shaders[groupTextureCount-1]; + shader = this.shaders[groupTextureCount - 1]; - if(!shader) + if (!shader) { - shader = this.shaders[groupTextureCount-1] = generateMultiTextureShader(gl, groupTextureCount); + shader = this.shaders[groupTextureCount - 1] = generateMultiTextureShader(gl, groupTextureCount); //console.log("SHADER generated for " + textureCount + " textures") } @@ -357,7 +361,7 @@ } // set the blend mode.. - this.renderer.state.setBlendMode( group.blend ); + this.renderer.state.setBlendMode(group.blend); gl.drawElements(gl.TRIANGLES, group.size * 6, gl.UNSIGNED_SHORT, group.start * 6 * 2); } @@ -388,7 +392,8 @@ */ destroy() { - for (let i = 0; i < this.vaoMax; i++) { + for (let i = 0; i < this.vaoMax; i++) + { this.vertexBuffers[i].destroy(); this.vaos[i].destroy(); } @@ -399,9 +404,10 @@ super.destroy(); - for (let i = 0; i < this.shaders.length; i++) { + for (let i = 0; i < this.shaders.length; i++) + { - if(this.shaders[i]) + if (this.shaders[i]) { this.shaders[i].destroy(); } @@ -414,7 +420,8 @@ this.sprites = null; - for (let i = 0; i < this.buffers.length; i++) { + for (let i = 0; i < this.buffers.length; i++) + { this.buffers[i].destroy(); } } diff --git a/src/core/sprites/webgl/generateMultiTextureShader.js b/src/core/sprites/webgl/generateMultiTextureShader.js index 32a28e1..b57b066 100644 --- a/src/core/sprites/webgl/generateMultiTextureShader.js +++ b/src/core/sprites/webgl/generateMultiTextureShader.js @@ -25,7 +25,7 @@ const shader = new Shader(gl, vertexSrc, fragmentSrc); - let sampleValues = []; + const sampleValues = []; for (let i = 0; i < maxTextures; i++) { sampleValues[i] = i; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 50b4193..0b0ef12 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -6,9 +6,9 @@ import TextStyle from './TextStyle'; const defaultDestroyOptions = { - texture:true, - children:false, - baseTexture:true + texture: true, + children: false, + baseTexture: true }; /** @@ -106,13 +106,14 @@ const style = this._style; // check if style has changed.. - if(this.localStyleID !== style.styleID) + if (this.localStyleID !== style.styleID) { this.dirty = true; this.localStyleID = style.styleID; } - if (!this.dirty && respectDirty) { + if (!this.dirty && respectDirty) + { return; } @@ -124,19 +125,19 @@ // word wrap // preserve original text - let outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; + const outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; // split text into lines - let lines = outputText.split(/(?:\r\n|\r|\n)/); + const lines = outputText.split(/(?:\r\n|\r|\n)/); // calculate text width const lineWidths = new Array(lines.length); let maxLineWidth = 0; - let fontProperties = this.determineFontProperties(this._font); + const fontProperties = this.determineFontProperties(this._font); for (let i = 0; i < lines.length; i++) { - let lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); + const lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; maxLineWidth = Math.max(maxLineWidth, lineWidth); } @@ -149,20 +150,20 @@ width += style.padding * 2; - this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); + this.canvas.width = Math.ceil(( width + this.context.lineWidth ) * this.resolution); // calculate text height - let lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; + const lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness; - let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; + let height = Math.max(lineHeight, fontProperties.fontSize + style.strokeThickness) + (lines.length - 1) * lineHeight; if (style.dropShadow) { height += style.dropShadowDistance; } - this.canvas.height = Math.ceil( ( height + this._style.padding * 2 ) * this.resolution ); + this.canvas.height = Math.ceil(( height + this._style.padding * 2 ) * this.resolution); - this.context.scale( this.resolution, this.resolution); + this.context.scale(this.resolution, this.resolution); if (navigator.isCocoonJS) { @@ -170,8 +171,8 @@ } - // this.context.fillStyle="#FF0000"; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); + // this.context.fillStyle="#FF0000"; + // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -185,15 +186,18 @@ if (style.dropShadow) { - if (style.dropShadowBlur > 0) { + if (style.dropShadowBlur > 0) + { this.context.shadowColor = style.dropShadowColor; this.context.shadowBlur = style.dropShadowBlur; - } else { + } + else + { this.context.fillStyle = style.dropShadowColor; } - let xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; - let yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; + const xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance; + const yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance; for (let i = 0; i < lines.length; i++) { @@ -263,7 +267,7 @@ * @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=false) + drawLetterSpacing(text, x, y, isStroke = false) { const style = this._style; @@ -326,13 +330,13 @@ texture.trim.x = -style.padding; texture.trim.y = -style.padding; - texture.orig.width = texture._frame.width- style.padding*2; - texture.orig.height = texture._frame.height - style.padding*2; + texture.orig.width = texture._frame.width - style.padding * 2; + texture.orig.height = texture._frame.height - style.padding * 2; //call sprite onTextureUpdate to update scale if _width or _height were set this._onTextureUpdate(); - texture.baseTexture.emit('update', texture.baseTexture); + texture.baseTexture.emit('update', texture.baseTexture); this.dirty = false; } @@ -344,7 +348,7 @@ */ renderWebGL(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -363,7 +367,7 @@ */ _renderCanvas(renderer) { - if(this.resolution !== renderer.resolution) + if (this.resolution !== renderer.resolution) { this.resolution = renderer.resolution; this.dirty = true; @@ -412,9 +416,9 @@ context.fillStyle = '#000'; context.fillText('|MÉq', 0, baseline); - let imagedata = context.getImageData(0, 0, width, height).data; - let pixels = imagedata.length; - let line = width * 4; + const imagedata = context.getImageData(0, 0, width, height).data; + const pixels = imagedata.length; + const line = width * 4; let idx = 0; let stop = false; @@ -494,36 +498,36 @@ for (let i = 0; i < lines.length; i++) { let spaceLeft = wordWrapWidth; - let words = lines[i].split(' '); + const words = lines[i].split(' '); for (let j = 0; j < words.length; j++) { - let wordWidth = this.context.measureText(words[j]).width; + const wordWidth = this.context.measureText(words[j]).width; if (this._style.breakWords && wordWidth > wordWrapWidth) { // Word should be split in the middle - let characters = words[j].split(''); + const characters = words[j].split(''); for (let c = 0; c < characters.length; c++) { - let characterWidth = this.context.measureText(characters[c]).width; - if (characterWidth > spaceLeft) - { - result += '\n' + characters[c]; - spaceLeft = wordWrapWidth - characterWidth; - } - else - { - if (c === 0) + const characterWidth = this.context.measureText(characters[c]).width; + if (characterWidth > spaceLeft) { - result += ' '; + result += '\n' + characters[c]; + spaceLeft = wordWrapWidth - characterWidth; } - result += characters[c]; - spaceLeft -= characterWidth; - } + else + { + if (c === 0) + { + result += ' '; + } + result += characters[c]; + spaceLeft -= characterWidth; + } } } else { - let wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; + const wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if (j === 0 || wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is @@ -543,7 +547,7 @@ } } - if (i < lines.length-1) + if (i < lines.length - 1) { result += '\n'; } @@ -585,11 +589,11 @@ else { // cocoon on canvas+ cannot generate textures, so use the first colour instead - if ( navigator.isCocoonJS ) + if (navigator.isCocoonJS) { return style.fill[0]; } - + // 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 gradient; @@ -654,11 +658,12 @@ */ destroy(options) { - if (typeof options === 'boolean') { - options = { children: options }; + if (typeof options === 'boolean') + { + options = {children: options}; } - options = Object.assign({}, defaultDestroyOptions, options); + options = Object.assign({}, defaultDestroyOptions, options); super.destroy(options); @@ -681,11 +686,12 @@ return Math.abs(this.scale.x) * this.texture.orig.width; } + set width(value) { this.updateText(true); - 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; } @@ -702,6 +708,7 @@ return Math.abs(this.scale.y) * this._texture.orig.height; } + set height(value) { this.updateText(true); @@ -721,6 +728,7 @@ { return this._style; } + set style(style) { style = style || {}; @@ -747,6 +755,7 @@ { return this._text; } + set text(text) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 71bf042..b721b8d 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -53,8 +53,8 @@ */ clone() { - let clonedProperties = {}; - for (let key in this._defaults) + const clonedProperties = {}; + for (const key in this._defaults) { clonedProperties[key] = this[key]; } @@ -175,7 +175,7 @@ } set dropShadowColor(dropShadowColor) { - let outputColor = getColor(dropShadowColor); + const outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; @@ -202,7 +202,7 @@ } set fill(fill) { - let outputColor = getColor(fill); + const outputColor = getColor(fill); if (this._fill !== outputColor) { this._fill = outputColor; @@ -359,7 +359,7 @@ } set stroke(stroke) { - let outputColor = getColor(stroke); + const outputColor = getColor(stroke); if (this._stroke !== outputColor) { this._stroke = outputColor; diff --git a/src/core/textures/BaseTexture.js b/src/core/textures/BaseTexture.js index 4d8dd4f..46490f4 100644 --- a/src/core/textures/BaseTexture.js +++ b/src/core/textures/BaseTexture.js @@ -223,7 +223,7 @@ */ loadSource(source) { - let wasLoading = this.isLoading; + const wasLoading = this.isLoading; this.hasLoaded = false; this.isLoading = false; @@ -397,7 +397,7 @@ { // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 - let image = new Image();//document.createElement('img'); + const image = new Image();//document.createElement('img'); if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0) diff --git a/src/core/textures/Texture.js b/src/core/textures/Texture.js index 073e8c0..1a030d7 100644 --- a/src/core/textures/Texture.js +++ b/src/core/textures/Texture.js @@ -102,11 +102,15 @@ this._rotate = +(rotate || 0); - if (rotate === true) { + if (rotate === true) + { // this is old texturepacker legacy, some games/libraries are passing "true" for rotated textures this._rotate = 2; - } else { - if (this._rotate % 2 !== 0) { + } + else + { + if (this._rotate % 2 !== 0) + { throw 'attempt to use diamond-shaped UVs. If you are sure, set rotation manually'; } } @@ -201,7 +205,7 @@ { // delete the texture if it exists in the texture cache.. // this only needs to be removed if the base texture is actually destoryed too.. - if(utils.TextureCache[this.baseTexture.imageUrl]) + if (utils.TextureCache[this.baseTexture.imageUrl]) { delete utils.TextureCache[this.baseTexture.imageUrl]; } @@ -354,15 +358,15 @@ { //TODO auto detect cross origin.. //TODO pass in scale mode? - if(typeof source === 'string') + if (typeof source === 'string') { const texture = utils.TextureCache[source]; if (!texture) { // check if its a video.. - let isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; - if(isVideo) + const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null; + if (isVideo) { return Texture.fromVideoUrl(source); } @@ -372,15 +376,15 @@ return texture; } - else if(source instanceof HTMLCanvasElement) + else if (source instanceof HTMLCanvasElement) { return Texture.fromCanvas(source); } - else if(source instanceof HTMLVideoElement) + else if (source instanceof HTMLVideoElement) { return Texture.fromVideo(source); } - else if(source instanceof BaseTexture) + else if (source instanceof BaseTexture) { return new Texture(BaseTexture); } @@ -431,6 +435,7 @@ { return this._frame; } + set frame(frame) { this._frame = frame; @@ -469,6 +474,7 @@ { return this._rotate; } + set rotate(rotate) { this._rotate = rotate; @@ -483,7 +489,8 @@ * * @member {number} */ - get width() { + get width() + { return this.orig ? this.orig.width : 0; } @@ -492,7 +499,8 @@ * * @member {number} */ - get height() { + get height() + { return this.orig ? this.orig.height : 0; } } @@ -505,9 +513,17 @@ * @constant */ Texture.EMPTY = new Texture(new BaseTexture()); -Texture.EMPTY.destroy = function() {}; -Texture.EMPTY.on = function() {}; -Texture.EMPTY.once = function() {}; -Texture.EMPTY.emit = function() {}; +Texture.EMPTY.destroy = function () +{ +}; +Texture.EMPTY.on = function () +{ +}; +Texture.EMPTY.once = function () +{ +}; +Texture.EMPTY.emit = function () +{ +}; export default Texture; diff --git a/src/core/textures/TextureUvs.js b/src/core/textures/TextureUvs.js index 9ed35e8..9b38f52 100644 --- a/src/core/textures/TextureUvs.js +++ b/src/core/textures/TextureUvs.js @@ -41,11 +41,11 @@ if(rotate) { //width and height div 2 div baseFrame size - let w2 = frame.width / 2 / tw; - let h2 = frame.height / 2 / th; + const w2 = frame.width / 2 / tw; + const h2 = frame.height / 2 / th; //coordinates of center - let cX = frame.x / tw + w2; - let cY = frame.y / th + h2; + const cX = frame.x / tw + w2; + const cY = frame.y / th + h2; rotate = GroupD8.add(rotate, GroupD8.NW); //NW is top-left corner this.x0 = cX + w2 * GroupD8.uX(rotate); this.y0 = cY + h2 * GroupD8.uY(rotate); diff --git a/src/core/ticker/Ticker.js b/src/core/ticker/Ticker.js index f00539a..d09a3b4 100644 --- a/src/core/ticker/Ticker.js +++ b/src/core/ticker/Ticker.js @@ -117,8 +117,8 @@ * * @private */ - this._tick = (time) => { - + this._tick = (time) => + { this._requestId = null; if (this.started) diff --git a/src/core/utils/determineCrossOrigin.js b/src/core/utils/determineCrossOrigin.js index a3c61e9..2289044 100644 --- a/src/core/utils/determineCrossOrigin.js +++ b/src/core/utils/determineCrossOrigin.js @@ -9,19 +9,22 @@ * Nipped from the resource loader! * @private * @param url {string} The url to test. - * @param loc [location=window.location] {object} The location object to test against. + * @param [loc=window.location] {object} The location object to test against. * @return {string} The crossOrigin value to use (or empty string for none). */ -const determineCrossOrigin = function (url, loc) { +const determineCrossOrigin = function (url, loc=window.location) +{ // data: and javascript: urls are considered same-origin - if (url.indexOf('data:') === 0) { + if (url.indexOf('data:') === 0) + { return ''; } // default is window.location loc = loc || window.location; - if (!tempAnchor) { + if (!tempAnchor) + { tempAnchor = document.createElement('a'); } @@ -34,7 +37,8 @@ const samePort = (!url.port && loc.port === '') || (url.port === loc.port); // if cross origin - if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) { + if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) + { return 'anonymous'; } diff --git a/src/core/utils/index.js b/src/core/utils/index.js index 88ee493..e121d41 100644 --- a/src/core/utils/index.js +++ b/src/core/utils/index.js @@ -110,7 +110,7 @@ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - let args = [ + const args = [ `\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;', @@ -152,10 +152,10 @@ const canvas = document.createElement('canvas'); let gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions); - let success = !!(gl && gl.getContextAttributes().stencil); + const success = !!(gl && gl.getContextAttributes().stencil); if (gl) { - let loseContext = gl.getExtension('WEBGL_lose_context'); + const loseContext = gl.getExtension('WEBGL_lose_context'); if(loseContext) { @@ -194,7 +194,7 @@ */ removeItems (arr, startIdx, removeCount) { - let length = arr.length; + const length = arr.length; if (startIdx >= length || removeCount === 0) { @@ -202,7 +202,7 @@ } removeCount = (startIdx+removeCount > length ? length-startIdx : removeCount); - let len = length-removeCount; + const len = length-removeCount; for (let i = startIdx; i < len; ++i) { arr[i] = arr[i + removeCount]; diff --git a/src/core/utils/pluginTarget.js b/src/core/utils/pluginTarget.js index ec0375f..f3e51e9 100644 --- a/src/core/utils/pluginTarget.js +++ b/src/core/utils/pluginTarget.js @@ -32,7 +32,7 @@ { this.plugins = this.plugins || {}; - for (let o in obj.__plugins) + for (const o in obj.__plugins) { this.plugins[o] = new (obj.__plugins[o])(this); } @@ -44,7 +44,7 @@ */ obj.prototype.destroyPlugins = function () { - for (let o in this.plugins) + for (const o in this.plugins) { this.plugins[o].destroy(); this.plugins[o] = null; diff --git a/src/deprecation.js b/src/deprecation.js index 198c43e..106ac02 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -9,23 +9,28 @@ // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes // are being used within the code -function warn(msg) { +function warn(msg) +{ let stack = new Error().stack; // Handle IE < 10 and Safari < 6 - if (typeof stack === 'undefined') { + if (typeof stack === 'undefined') + { console.warn('Deprecation Warning: ', msg); } - else { + else + { // chop off the stack trace which includes pixi.js internal calls stack = stack.split('\n').splice(3).join('\n'); - if (console.groupCollapsed) { + if (console.groupCollapsed) + { console.groupCollapsed('%cDeprecation Warning: %c%s', 'color:#614108;background:#fffbe6', 'font-weight:normal;color:#614108;background:#fffbe6', msg); console.warn(stack); console.groupEnd(); } - else { + else + { console.warn('Deprecation Warning: ', msg); console.warn(stack); } @@ -42,7 +47,7 @@ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead. * @deprecated since version 3.0.0 */ -core.SpriteBatch = function() +core.SpriteBatch = function () { throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.'); }; @@ -56,7 +61,7 @@ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class. * @deprecated since version 3.0.0 */ -core.AssetLoader = function() +core.AssetLoader = function () { throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.'); }; @@ -144,7 +149,8 @@ * @deprecated since version 4.0.0 */ ParticleContainer: { - get() { + get() + { // @if DEBUG warn('The ParticleContainer class has been moved to particles.ParticleContainer, please use particles.ParticleContainer from now on.'); // @endif @@ -296,7 +302,7 @@ } }, - /** + /** * @class * @private * @name PIXI.AbstractFilter @@ -331,7 +337,7 @@ } }); -core.DisplayObject.prototype.generateTexture = function(renderer, scaleMode, resolution) +core.DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution) { // @if DEBUG warn('generateTexture has moved to the renderer, please use renderer.generateTexture(displayObject)'); @@ -340,7 +346,7 @@ }; -core.Graphics.prototype.generateTexture = function(scaleMode, resolution) +core.Graphics.prototype.generateTexture = function (scaleMode, resolution) { // @if DEBUG warn('graphics generate texture has moved to the renderer. Or to render a graphics to a texture using canvas please use generateCanvasTexture'); @@ -348,7 +354,7 @@ return this.generateCanvasTexture(scaleMode, resolution); }; -core.RenderTexture.prototype.render = function(displayObject, matrix, clear, updateTransform) +core.RenderTexture.prototype.render = function (displayObject, matrix, clear, updateTransform) { this.legacyRenderer.render(displayObject, this, clear, matrix, !updateTransform); // @if DEBUG @@ -356,7 +362,7 @@ // @endif }; -core.RenderTexture.prototype.getImage = function(target) +core.RenderTexture.prototype.getImage = function (target) { // @if DEBUG warn('RenderTexture.getImage is now deprecated, please use renderer.extract.image(target)'); @@ -364,7 +370,7 @@ return this.legacyRenderer.extract.image(target); }; -core.RenderTexture.prototype.getBase64 = function(target) +core.RenderTexture.prototype.getBase64 = function (target) { // @if DEBUG warn('RenderTexture.getBase64 is now deprecated, please use renderer.extract.base64(target)'); @@ -372,7 +378,7 @@ return this.legacyRenderer.extract.base64(target); }; -core.RenderTexture.prototype.getCanvas = function(target) +core.RenderTexture.prototype.getCanvas = function (target) { // @if DEBUG warn('RenderTexture.getCanvas is now deprecated, please use renderer.extract.canvas(target)'); @@ -380,7 +386,7 @@ return this.legacyRenderer.extract.canvas(target); }; -core.RenderTexture.prototype.getPixels = function(target) +core.RenderTexture.prototype.getPixels = function (target) { // @if DEBUG warn('RenderTexture.getPixels is now deprecated, please use renderer.extract.pixels(target)'); @@ -389,7 +395,6 @@ }; - /** * @method * @private @@ -397,7 +402,7 @@ * @see PIXI.Sprite#texture * @deprecated since version 3.0.0 */ -core.Sprite.prototype.setTexture = function(texture) +core.Sprite.prototype.setTexture = function (texture) { this.texture = texture; // @if DEBUG @@ -406,14 +411,13 @@ }; - /** * @method * @name PIXI.extras.BitmapText#setText * @see PIXI.extras.BitmapText#text * @deprecated since version 3.0.0 */ -extras.BitmapText.prototype.setText = function(text) +extras.BitmapText.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -427,7 +431,7 @@ * @see PIXI.Text#text * @deprecated since version 3.0.0 */ -core.Text.prototype.setText = function(text) +core.Text.prototype.setText = function (text) { this.text = text; // @if DEBUG @@ -441,7 +445,7 @@ * @see PIXI.Text#style * @deprecated since version 3.0.0 */ -core.Text.prototype.setStyle = function(style) +core.Text.prototype.setStyle = function (style) { this.style = style; // @if DEBUG @@ -462,7 +466,7 @@ // @if DEBUG 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; + const fontSizeString = (typeof this._fontSize === 'number') ? `${this._fontSize}px` : this._fontSize; return `${this._fontStyle} ${this._fontVariant} ${this._fontWeight} ${fontSizeString} ${this._fontFamily}`; }, set (font) @@ -472,11 +476,11 @@ // @endif // can work out fontStyle from search of whole string - if ( font.indexOf('italic') > 1 ) + if (font.indexOf('italic') > 1) { this._fontStyle = 'italic'; } - else if ( font.indexOf('oblique') > -1 ) + else if (font.indexOf('oblique') > -1) { this._fontStyle = 'oblique'; } @@ -486,7 +490,7 @@ } // can work out fontVariant from search of whole string - if ( font.indexOf('small-caps') > -1 ) + if (font.indexOf('small-caps') > -1) { this._fontVariant = 'small-caps'; } @@ -496,13 +500,13 @@ } // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units - let splits = font.split(' '); + const splits = font.split(' '); let fontSizeIndex = -1; this._fontSize = 26; - for ( let i = 0; i < splits.length; ++i ) + for (let i = 0; i < splits.length; ++i) { - if ( splits[i].match( /(px|pt|em|%)/ ) ) + if (splits[i].match(/(px|pt|em|%)/)) { fontSizeIndex = i; this._fontSize = splits[i]; @@ -512,9 +516,9 @@ // we can now search for fontWeight as we know it must occur before the fontSize this._fontWeight = 'normal'; - for ( let 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)/ ) ) + if (splits[i].match(/(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/)) { this._fontWeight = splits[i]; break; @@ -522,10 +526,10 @@ } // and finally join everything together after the fontSize in case the font family has multiple words - if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + if (fontSizeIndex > -1 && fontSizeIndex < splits.length - 1) { this._fontFamily = ''; - for ( let i = fontSizeIndex + 1; i < splits.length; ++i ) + for (let i = fontSizeIndex + 1; i < splits.length; ++i) { this._fontFamily += splits[i] + ' '; } @@ -540,7 +544,7 @@ this.styleID++; } } -} ); +}); /** * @method @@ -548,7 +552,7 @@ * @see PIXI.Texture#setFrame * @deprecated since version 3.0.0 */ -core.Texture.prototype.setFrame = function(frame) +core.Texture.prototype.setFrame = function (frame) { this.frame = frame; // @if DEBUG @@ -613,7 +617,8 @@ * @see PIXI.CanvasTinter * @deprecated */ -core.utils.canUseNewCanvasBlendModes = function() { +core.utils.canUseNewCanvasBlendModes = function () +{ // @if DEBUG warn('utils.canUseNewCanvasBlendModes() is deprecated, please use CanvasTinter.canUseMultiply from now on'); // @endif diff --git a/src/extract/webgl/WebGLExtract.js b/src/extract/webgl/WebGLExtract.js index 208cae9..7b0c0f4 100644 --- a/src/extract/webgl/WebGLExtract.js +++ b/src/extract/webgl/WebGLExtract.js @@ -97,14 +97,14 @@ renderer.bindRenderTarget(textureBuffer); // set up an array of pixels - let webGLPixels = new Uint8Array(4 * width * height); + const webGLPixels = new Uint8Array(4 * width * height); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); // add the pixels to the canvas - let canvasData = canvasBuffer.context.getImageData(0, 0, width, height); + const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); canvasData.data.set(webGLPixels); canvasBuffer.context.putImageData(canvasData, 0, 0); @@ -173,7 +173,7 @@ // bind the buffer renderer.bindRenderTarget(textureBuffer); // read pixels to the array - let gl = renderer.gl; + const gl = renderer.gl; gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels); } diff --git a/src/extras/BitmapText.js b/src/extras/BitmapText.js index 985fc0b..bc98062 100644 --- a/src/extras/BitmapText.js +++ b/src/extras/BitmapText.js @@ -30,7 +30,7 @@ */ class BitmapText extends core.Container { - constructor(text, style={}) + constructor(text, style = {}) { super(); @@ -145,9 +145,10 @@ for (let i = 0; i < this.text.length; i++) { - let charCode = this.text.charCodeAt(i); + const charCode = this.text.charCodeAt(i); - if(/(\s)/.test(this.text.charAt(i))){ + if (/(\s)/.test(this.text.charAt(i))) + { lastSpace = i; lastSpaceWidth = lastLineWidth; } @@ -180,7 +181,7 @@ continue; } - let charData = data.chars[charCode]; + const charData = data.chars[charCode]; if (!charData) { @@ -192,7 +193,12 @@ pos.x += charData.kerning[prevCharCode]; } - chars.push({texture:charData.texture, line, 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)); @@ -202,7 +208,7 @@ lineWidths.push(lastLineWidth); maxLineWidth = Math.max(maxLineWidth, lastLineWidth); - let lineAlignOffsets = []; + const lineAlignOffsets = []; for (let i = 0; i <= line; i++) { @@ -220,8 +226,8 @@ lineAlignOffsets.push(alignOffset); } - let lenChars = chars.length; - let tint = this.tint; + const lenChars = chars.length; + const tint = this.tint; for (let i = 0; i < lenChars; i++) { @@ -306,7 +312,8 @@ } } - makeDirty() { + makeDirty() + { this.dirty = true; } @@ -320,6 +327,7 @@ { return this._font.tint; } + set tint(value) { this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF; @@ -338,6 +346,7 @@ { return this._font.align; } + set align(value) { this._font.align = value || 'left'; @@ -354,14 +363,19 @@ * @member {PIXI.Point | number} * @memberof PIXI.extras.BitmapText# */ - get anchor() { + get anchor() + { return this._anchor; } - set anchor(value) { - if (typeof value === 'number'){ - this._anchor.set(value); + + set anchor(value) + { + if (typeof value === 'number') + { + this._anchor.set(value); } - else { + else + { this._anchor.copy(value); } } @@ -376,19 +390,23 @@ { return this._font; } + set font(value) { - if (!value) { + if (!value) + { return; } - if (typeof value === 'string') { + if (typeof value === 'string') + { value = value.split(' '); this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' '); this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size; } - else { + else + { this._font.name = value.name; this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10); } @@ -406,6 +424,7 @@ { return this._text; } + set text(value) { value = value.toString() || ' '; diff --git a/src/extras/MovieClip.js b/src/extras/MovieClip.js index a5213e6..fe079b8 100644 --- a/src/extras/MovieClip.js +++ b/src/extras/MovieClip.js @@ -165,7 +165,7 @@ lag += this._durations[this.currentFrame]; } - let sign = Math.sign(this.animationSpeed * deltaTime); + const sign = Math.sign(this.animationSpeed * deltaTime); this._currentTime = Math.floor(this._currentTime); while (lag >= this._durations[this.currentFrame]) diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js index 1e94177..e2c6086 100644 --- a/src/extras/TilingSprite.js +++ b/src/extras/TilingSprite.js @@ -328,13 +328,13 @@ { this.worldTransform.applyInverse(point, tempPoint); - let width = this._width; - let height = this._height; - let x1 = -width * this.anchor.x; + const width = this._width; + const height = this._height; + const x1 = -width * this.anchor.x; if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) { - let y1 = -height * this.anchor.y; + const y1 = -height * this.anchor.y; if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) { @@ -349,7 +349,8 @@ * Destroys this tiling sprite * */ - destroy() { + destroy() + { super.destroy(); this.tileScale = null; @@ -388,7 +389,7 @@ */ static fromFrame(frameId,width,height) { - let texture = core.utils.TextureCache[frameId]; + const texture = core.utils.TextureCache[frameId]; if (!texture) { diff --git a/src/extras/cacheAsBitmap.js b/src/extras/cacheAsBitmap.js index 0fb87b7..c90c7e2 100644 --- a/src/extras/cacheAsBitmap.js +++ b/src/extras/cacheAsBitmap.js @@ -9,7 +9,8 @@ // 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. -const CacheData = function(){ +const CacheData = function() +{ this.originalRenderWebGL = null; this.originalRenderCanvas = null; diff --git a/src/filters/blur/BlurXFilter.js b/src/filters/blur/BlurXFilter.js index 3270e5e..16fea92 100644 --- a/src/filters/blur/BlurXFilter.js +++ b/src/filters/blur/BlurXFilter.js @@ -14,8 +14,8 @@ { constructor(strength, quality, resolution) { - let vertSrc = generateBlurVertSource(5, true); - let fragSrc = generateBlurFragSource(5); + const vertSrc = generateBlurVertSource(5, true); + const fragSrc = generateBlurFragSource(5); super( // vertex shader diff --git a/src/filters/blur/BlurYFilter.js b/src/filters/blur/BlurYFilter.js index 1c41912..1ac90a0 100644 --- a/src/filters/blur/BlurYFilter.js +++ b/src/filters/blur/BlurYFilter.js @@ -66,7 +66,7 @@ { filterManager.applyFilter(this, flip, flop, true); - let temp = flop; + const temp = flop; flop = flip; flip = temp; } diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index da79b08..c8ab8c9 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -28,10 +28,10 @@ ); this.uniforms.m = [ - 1, 0, 0, 0, 0, - 0, 1, 0, 0, 0, - 0, 0, 1, 0, 0, - 0, 0, 0, 1, 0]; + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0]; } @@ -47,7 +47,8 @@ let newMatrix = matrix; - if (multiply) { + if (multiply) + { this._multiply(newMatrix, this.uniforms.m, matrix); newMatrix = this._colorMatrix(newMatrix); } @@ -185,26 +186,26 @@ sqrt = Math.sqrt; /*a good approximation for hue rotation - This matrix is far better than the versions with magic luminance constants - formerly used here, but also used in the starling framework (flash) and known from this - old part of the internet: quasimondo.com/archives/000565.php + This matrix is far better than the versions with magic luminance constants + formerly used here, but also used in the starling framework (flash) and known from this + old part of the internet: quasimondo.com/archives/000565.php - This new matrix is based on rgb cube rotation in space. Look here for a more descriptive - implementation as a shader not a general matrix: - https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js + This new matrix is based on rgb cube rotation in space. Look here for a more descriptive + implementation as a shader not a general matrix: + https://github.com/evanw/glfx.js/blob/58841c23919bd59787effc0333a4897b43835412/src/filters/adjust/huesaturation.js - This is the source for the code: - see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 - */ + This is the source for the code: + see http://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751 + */ - const w = 1/3, sqrW = sqrt(w);//weight is + const w = 1 / 3, sqrW = sqrt(w);//weight is const a00 = cosR + (1.0 - cosR) * w; const a01 = w * (1.0 - cosR) - sqrW * sinR; const a02 = w * (1.0 - cosR) + sqrW * sinR; const a10 = w * (1.0 - cosR) + sqrW * sinR; - const a11 = cosR + w*(1.0 - cosR); + const a11 = cosR + w * (1.0 - cosR); const a12 = w * (1.0 - cosR) - sqrW * sinR; const a20 = w * (1.0 - cosR) - sqrW * sinR; @@ -213,10 +214,10 @@ const matrix = [ - a00, a01, a02, 0, 0, - a10, a11, a12, 0, 0, - a20, a21, a22, 0, 0, - 0, 0, 0, 1, 0, + a00, a01, a02, 0, 0, + a10, a11, a12, 0, 0, + a20, a21, a22, 0, 0, + 0, 0, 0, 1, 0, ]; this._loadMatrix(matrix, multiply); @@ -537,6 +538,7 @@ { return this.uniforms.m; } + set matrix(value) { this.uniforms.m = value; diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index df2dd45..b665d26 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -74,7 +74,8 @@ target: null, type: null, data: this.mouse, - stopPropagation(){ + stopPropagation() + { this.stopped = true; } }; @@ -127,7 +128,7 @@ * @private */ this.onMouseUp = this.onMouseUp.bind(this); - this.processMouseUp = this.processMouseUp.bind( this ); + this.processMouseUp = this.processMouseUp.bind(this); /** @@ -135,21 +136,21 @@ * @private */ this.onMouseDown = this.onMouseDown.bind(this); - this.processMouseDown = this.processMouseDown.bind( this ); + this.processMouseDown = this.processMouseDown.bind(this); /** * @member {Function} * @private */ - this.onMouseMove = this.onMouseMove.bind( this ); - this.processMouseMove = this.processMouseMove.bind( this ); + this.onMouseMove = this.onMouseMove.bind(this); + this.processMouseMove = this.processMouseMove.bind(this); /** * @member {Function} * @private */ this.onMouseOut = this.onMouseOut.bind(this); - this.processMouseOverOut = this.processMouseOverOut.bind( this ); + this.processMouseOverOut = this.processMouseOverOut.bind(this); /** * @member {Function} @@ -332,7 +333,7 @@ * @param [resolution=1] {number} The resolution / device pixel ratio of the new element (relative to the canvas). * @private */ - setTargetElement(element, resolution=1) + setTargetElement(element, resolution = 1) { this.removeEvents(); @@ -363,16 +364,16 @@ this.interactionDOMElement.style['-ms-touch-action'] = 'none'; } - window.document.addEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); - this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); + window.document.addEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.addEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.addEventListener('mouseover', this.onMouseOver, true); - this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); + this.interactionDOMElement.addEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.addEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.addEventListener('touchmove', this.onTouchMove, true); - window.addEventListener('mouseup', this.onMouseUp, true); + window.addEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = true; } @@ -399,16 +400,16 @@ window.document.removeEventListener('mousemove', this.onMouseMove, true); this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); this.interactionDOMElement.removeEventListener('mouseover', this.onMouseOver, true); this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); this.interactionDOMElement = null; - window.removeEventListener('mouseup', this.onMouseUp, true); + window.removeEventListener('mouseup', this.onMouseUp, true); this.eventsAdded = false; } @@ -437,7 +438,7 @@ } // if the user move the mouse this check has already been dfone using the mouse move! - if(this.didMove) + if (this.didMove) { this.didMove = false; return; @@ -450,7 +451,7 @@ // In this case, mouseover and mouseevents would not pass the flag test in dispatchEvent function this.eventData.stopped = false; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true); if (this.currentCursorStyle !== this.cursor) { @@ -469,18 +470,18 @@ * @param eventData {object} the event data object * @private */ - dispatchEvent( displayObject, eventString, eventData ) + dispatchEvent(displayObject, eventString, eventData) { - if(!eventData.stopped) + if (!eventData.stopped) { eventData.target = displayObject; eventData.type = eventString; - displayObject.emit( eventString, eventData ); + displayObject.emit(eventString, eventData); - if( displayObject[eventString] ) + if (displayObject[eventString]) { - displayObject[eventString]( eventData ); + displayObject[eventString](eventData); } } } @@ -493,18 +494,20 @@ * @param {number} x the x coord of the position to map * @param {number} y the y coord of the position to map */ - mapPositionToPoint( point, x, y ) + mapPositionToPoint(point, x, y) { let rect; // IE 11 fix - if(!this.interactionDOMElement.parentElement) + if (!this.interactionDOMElement.parentElement) { - rect = { x: 0, y: 0, width: 0, height: 0 }; - } else { + rect = {x: 0, y: 0, width: 0, height: 0}; + } + else + { rect = this.interactionDOMElement.getBoundingClientRect(); } - point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; + point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width / rect.width ) ) / this.resolution; point.y = ( ( y - rect.top ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution; } @@ -521,7 +524,7 @@ */ processInteractive(point, displayObject, func, hitTest, interactive) { - if(!displayObject || !displayObject.visible) + if (!displayObject || !displayObject.visible) { return false; } @@ -543,24 +546,24 @@ interactiveParent = interactive; // if the displayobject has a hitArea, then it does not need to hitTest children. - if(displayObject.hitArea) + if (displayObject.hitArea) { interactiveParent = false; } // it has a mask! Then lets hit test that before continuing.. - if(hitTest && displayObject._mask) + if (hitTest && displayObject._mask) { - if(!displayObject._mask.containsPoint(point)) + if (!displayObject._mask.containsPoint(point)) { hitTest = false; } } // it has a filterArea! Same as mask but easier, its a rectangle - if(hitTest && displayObject.filterArea) + if (hitTest && displayObject.filterArea) { - if(!displayObject.filterArea.contains(point.x, point.y)) + if (!displayObject.filterArea.contains(point.x, point.y)) { hitTest = false; } @@ -568,20 +571,20 @@ // ** FREE TIP **! If an object is not interactive or has no buttons in it (such as a game scene!) set interactiveChildren to false for that displayObject. // This will allow pixi to completly ignore and bypass checking the displayObjects children. - if(displayObject.interactiveChildren) + if (displayObject.interactiveChildren) { const children = displayObject.children; - for (let i = children.length-1; i >= 0; i--) + for (let i = children.length - 1; i >= 0; i--) { - let child = children[i]; + const child = children[i]; // time to get recursive.. if this function will return if somthing is hit.. - if(this.processInteractive(point, child, func, hitTest, interactiveParent)) + if (this.processInteractive(point, child, func, hitTest, interactiveParent)) { // its a good idea to check if a child has lost its parent. // this means it has been removed whilst looping so its best - if(!child.parent) + if (!child.parent) { continue; } @@ -604,21 +607,20 @@ } - // no point running this if the item is not interactive or does not have an interactive parent. - if(interactive) + if (interactive) { // if we are hit testing (as in we have no hit any objects yet) // We also don't need to worry about hit testing if once of the displayObjects children has already been hit! - if(hitTest && !hit) + if (hitTest && !hit) { - if(displayObject.hitArea) + if (displayObject.hitArea) { - displayObject.worldTransform.applyInverse(point, this._tempPoint); - hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y ); + displayObject.worldTransform.applyInverse(point, this._tempPoint); + hit = displayObject.hitArea.contains(this._tempPoint.x, this._tempPoint.y); } - else if(displayObject.containsPoint) + else if (displayObject.containsPoint) { hit = displayObject.containsPoint(point); } @@ -626,7 +628,7 @@ } - if(displayObject.interactive) + if (displayObject.interactive) { func(displayObject, hit); } @@ -650,16 +652,16 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); if (this.autoPreventDefault) { this.mouse.originalEvent.preventDefault(); } - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightdown' : 'mousedown', this.eventData); } @@ -670,16 +672,16 @@ * @param hit {boolean} the result of the hit test on the dispay object * @private */ - processMouseDown( displayObject, hit ) + processMouseDown(displayObject, hit) { - let e = this.mouse.originalEvent; + const e = this.mouse.originalEvent; - let isRightButton = e.button === 2 || e.which === 3; + const isRightButton = e.button === 2 || e.which === 3; - if(hit) + if (hit) { - displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true; - this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData ); + displayObject[isRightButton ? '_isRightDown' : '_isLeftDown'] = true; + this.dispatchEvent(displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData); } } @@ -696,11 +698,11 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true); - let isRightButton = event.button === 2 || event.which === 3; + const isRightButton = event.button === 2 || event.which === 3; this.emit(isRightButton ? 'rightup' : 'mouseup', this.eventData); } @@ -711,29 +713,29 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseUp( displayObject, hit ) + processMouseUp(displayObject, hit) { const e = this.mouse.originalEvent; const isRightButton = e.button === 2 || e.which === 3; - const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; + const isDown = isRightButton ? '_isRightDown' : '_isLeftDown'; - if(hit) + if (hit) { - this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData ); + this.dispatchEvent(displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData); - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightclick' : 'click', this.eventData); } } else { - if( displayObject[ isDown ] ) + if (displayObject[isDown]) { - displayObject[ isDown ] = false; - this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData ); + displayObject[isDown] = false; + this.dispatchEvent(displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData); } } } @@ -751,13 +753,13 @@ this.eventData.data = this.mouse; this.eventData.stopped = false; - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.didMove = true; this.cursor = this.defaultCursorStyle; - this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true); this.emit('mousemove', this.eventData); @@ -777,14 +779,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseMove( displayObject, hit ) + processMouseMove(displayObject, hit) { this.processMouseOverOut(displayObject, hit); // only display on mouse over - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'mousemove', this.eventData); + this.dispatchEvent(displayObject, 'mousemove', this.eventData); } } @@ -804,14 +806,14 @@ this.eventData.stopped = false; // Update internal mouse reference - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); this.interactionDOMElement.style.cursor = this.defaultCursorStyle; // TODO optimize by not check EVERY TIME! maybe half as often? // - this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY ); + this.mapPositionToPoint(this.mouse.global, event.clientX, event.clientY); - this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false ); + this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false); this.emit('mouseout', this.eventData); } @@ -823,14 +825,14 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processMouseOverOut( displayObject, hit ) + processMouseOverOut(displayObject, hit) { - if(hit && this.mouseOverRenderer) + if (hit && this.mouseOverRenderer) { - if(!displayObject._over) + if (!displayObject._over) { displayObject._over = true; - this.dispatchEvent( displayObject, 'mouseover', this.eventData ); + this.dispatchEvent(displayObject, 'mouseover', this.eventData); } if (displayObject.buttonMode) @@ -840,10 +842,10 @@ } else { - if(displayObject._over) + if (displayObject._over) { displayObject._over = false; - this.dispatchEvent( displayObject, 'mouseout', this.eventData); + this.dispatchEvent(displayObject, 'mouseout', this.eventData); } } } @@ -882,22 +884,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; //TODO POOL - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true); this.emit('touchstart', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -908,12 +910,12 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchStart( displayObject, hit ) + processTouchStart(displayObject, hit) { - if(hit) + if (hit) { displayObject._touchDown = true; - this.dispatchEvent( displayObject, 'touchstart', this.eventData ); + this.dispatchEvent(displayObject, 'touchstart', this.eventData); } } @@ -934,11 +936,11 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; @@ -947,11 +949,11 @@ this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true); this.emit('touchend', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -962,24 +964,24 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchEnd( displayObject, hit ) + processTouchEnd(displayObject, hit) { - if(hit) + if (hit) { - this.dispatchEvent( displayObject, 'touchend', this.eventData ); + this.dispatchEvent(displayObject, 'touchend', this.eventData); - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'tap', this.eventData ); + this.dispatchEvent(displayObject, 'tap', this.eventData); } } else { - if( displayObject._touchDown ) + if (displayObject._touchDown) { displayObject._touchDown = false; - this.dispatchEvent( displayObject, 'touchendoutside', this.eventData ); + this.dispatchEvent(displayObject, 'touchendoutside', this.eventData); } } } @@ -1000,22 +1002,22 @@ const changedTouches = event.changedTouches; const cLength = changedTouches.length; - for (let i=0; i < cLength; i++) + for (let i = 0; i < cLength; i++) { const touchEvent = changedTouches[i]; - const touchData = this.getTouchData( touchEvent ); + const touchData = this.getTouchData(touchEvent); touchData.originalEvent = event; this.eventData.data = touchData; this.eventData.stopped = false; - this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside ); + this.processInteractive(touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, this.moveWhenInside); this.emit('touchmove', this.eventData); - this.returnTouchData( touchData ); + this.returnTouchData(touchData); } } @@ -1026,11 +1028,11 @@ * @param hit {boolean} the result of the hit test on the display object * @private */ - processTouchMove( displayObject, hit ) + processTouchMove(displayObject, hit) { - if(!this.moveWhenInside || hit) + if (!this.moveWhenInside || hit) { - this.dispatchEvent( displayObject, 'touchmove', this.eventData); + this.dispatchEvent(displayObject, 'touchmove', this.eventData); } } @@ -1046,9 +1048,9 @@ const touchData = this.interactiveDataPool.pop() || new InteractionData(); touchData.identifier = touchEvent.identifier; - this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY ); + this.mapPositionToPoint(touchData.global, touchEvent.clientX, touchEvent.clientY); - if(navigator.isCocoonJS) + if (navigator.isCocoonJS) { touchData.global.x = touchData.global.x / this.resolution; touchData.global.y = touchData.global.y / this.resolution; @@ -1067,16 +1069,17 @@ * * @private */ - returnTouchData( touchData ) + returnTouchData(touchData) { - this.interactiveDataPool.push( touchData ); + this.interactiveDataPool.push(touchData); } /** * Destroys the interaction manager * */ - destroy() { + destroy() + { this.removeEvents(); this.removeAllListeners(); diff --git a/src/loaders/bitmapFontParser.js b/src/loaders/bitmapFontParser.js index 4b034b1..c0a3200 100644 --- a/src/loaders/bitmapFontParser.js +++ b/src/loaders/bitmapFontParser.js @@ -3,7 +3,8 @@ import extras from '../extras'; import path from 'path'; -function parse(resource, texture) { +function parse(resource, texture) +{ const data = {}; const info = resource.data.getElementsByTagName('info')[0]; const common = resource.data.getElementsByTagName('common')[0]; @@ -14,7 +15,7 @@ data.chars = {}; //parse letters - let letters = resource.data.getElementsByTagName('char'); + const letters = resource.data.getElementsByTagName('char'); for (let i = 0; i < letters.length; i++) { @@ -45,7 +46,7 @@ const second = parseInt(kernings[i].getAttribute('second'), 10); const amount = parseInt(kernings[i].getAttribute('amount'), 10); - if(data.chars[second]) + if (data.chars[second]) { data.chars[second].kerning[first] = amount; } @@ -74,21 +75,25 @@ resource.data.getElementsByTagName('page').length === 0 || resource.data.getElementsByTagName('info').length === 0 || resource.data.getElementsByTagName('info')[0].getAttribute('face') === null - ) + ) { return next(); } let xmlUrl = !resource.isDataUrl ? path.dirname(resource.url) : ''; - if (resource.isDataUrl) { - if (xmlUrl === '.') { + if (resource.isDataUrl) + { + if (xmlUrl === '.') + { xmlUrl = ''; } - if (this.baseUrl && xmlUrl) { + if (this.baseUrl && xmlUrl) + { // if baseurl has a trailing slash then add one to xmlUrl so the replace works below - if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') { + if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') + { xmlUrl += '/'; } @@ -98,24 +103,28 @@ } // 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) !== '/') { + if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') + { xmlUrl += '/'; } - let textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); - if (core.utils.TextureCache[textureUrl]) { + const textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file'); + if (core.utils.TextureCache[textureUrl]) + { //reuse existing texture parse(resource, core.utils.TextureCache[textureUrl]); next(); } - else { - let loadOptions = { + else + { + const loadOptions = { crossOrigin: resource.crossOrigin, loadType: Resource.LOAD_TYPE.IMAGE, metadata: resource.metadata.imageMetadata }; // load the texture for the font - this.add(resource.name + '_image', textureUrl, loadOptions, res => { + this.add(resource.name + '_image', textureUrl, loadOptions, res => + { parse(resource, res.texture); next(); }); diff --git a/src/loaders/loader.js b/src/loaders/loader.js index 4d1d709..1253d02 100644 --- a/src/loaders/loader.js +++ b/src/loaders/loader.js @@ -32,12 +32,14 @@ { super(baseUrl, concurrency); - for (let i = 0; i < Loader._pixiMiddleware.length; ++i) { + for (let i = 0; i < Loader._pixiMiddleware.length; ++i) + { this.use(Loader._pixiMiddleware[i]()); } } - static addPixiMiddleware(fn) { + static addPixiMiddleware(fn) + { Loader._pixiMiddleware.push(fn); } } diff --git a/src/loaders/spritesheetParser.js b/src/loaders/spritesheetParser.js index 34a60b4..d2b01a4 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`; + const 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]) @@ -49,7 +49,7 @@ while (frameIndex - initialFrameIndex < maxFrames && frameIndex < frameKeys.length) { - let i = frameKeys[frameIndex]; + const i = frameKeys[frameIndex]; const rect = frames[i].frame; if (rect) @@ -59,10 +59,12 @@ let trim = null; const orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution); - if (frames[i].rotated) { + if (frames[i].rotated) + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution); } - else { + else + { frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution); } @@ -74,7 +76,7 @@ frames[i].spriteSourceSize.y / resolution, frames[i].spriteSourceSize.w / resolution, frames[i].spriteSourceSize.h / resolution - ); + ); } resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0); @@ -100,11 +102,16 @@ setTimeout(done, 0); } - function iteration() { - processNextBatch(() => { - if (shouldProcessNextBatch()) { + function iteration() + { + processNextBatch(() => + { + if (shouldProcessNextBatch()) + { iteration(); - } else { + } + else + { next(); } }); diff --git a/src/loaders/textureParser.js b/src/loaders/textureParser.js index 6f771ec..641bef0 100644 --- a/src/loaders/textureParser.js +++ b/src/loaders/textureParser.js @@ -7,7 +7,7 @@ // create a new texture if the data is an Image object if (resource.data && resource.isImage) { - let baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); + const baseTexture = new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)); baseTexture.imageUrl = resource.url; resource.texture = new core.Texture(baseTexture); // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions diff --git a/src/mesh/Mesh.js b/src/mesh/Mesh.js index 0c2eff2..5bc7201 100644 --- a/src/mesh/Mesh.js +++ b/src/mesh/Mesh.js @@ -16,8 +16,7 @@ * @param [indices] {Uint16Array} if you want to specify the indices * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts */ -class Mesh extends core.Container -{ +class Mesh extends core.Container { constructor(texture, vertices, uvs, indices, drawMode) { super(); @@ -36,9 +35,9 @@ * @member {Float32Array} */ this.uvs = uvs || new Float32Array([0, 0, - 1, 0, - 1, 1, - 0, 1]); + 1, 0, + 1, 1, + 0, 1]); /** * An array of vertices @@ -46,9 +45,9 @@ * @member {Float32Array} */ this.vertices = vertices || new Float32Array([0, 0, - 100, 0, - 100, 100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); /* * @member {Uint16Array} An array containing the indices of the vertices @@ -91,7 +90,7 @@ // run texture setter; this.texture = texture; - /** + /** * The default shader that is used if a mesh doesn't have a more specific one. * * @member {PIXI.Shader} @@ -125,38 +124,38 @@ const gl = renderer.gl; let glData = this._glDatas[renderer.CONTEXT_UID]; - if(!glData) + if (!glData) { glData = { - shader:new Shader(gl), - vertexBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), - uvBuffer:glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), - indexBuffer:glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), + shader: new Shader(gl), + vertexBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.vertices, gl.STREAM_DRAW), + uvBuffer: glCore.GLBuffer.createVertexBuffer(gl, this.uvs, gl.STREAM_DRAW), + indexBuffer: glCore.GLBuffer.createIndexBuffer(gl, this.indices, gl.STATIC_DRAW), // build the vao object that will render.. - vao:new glCore.VertexArrayObject(gl), - dirty:this.dirty, - indexDirty:this.indexDirty + vao: new glCore.VertexArrayObject(gl), + dirty: this.dirty, + indexDirty: this.indexDirty }; // build the vao object that will render.. glData.vao = new glCore.VertexArrayObject(gl) - .addIndex(glData.indexBuffer) - .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) - .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); + .addIndex(glData.indexBuffer) + .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 2 * 4, 0) + .addAttribute(glData.uvBuffer, glData.shader.attributes.aTextureCoord, gl.FLOAT, false, 2 * 4, 0); this._glDatas[renderer.CONTEXT_UID] = glData; } - if(this.dirty !== glData.dirty) + if (this.dirty !== glData.dirty) { glData.dirty = this.dirty; glData.uvBuffer.upload(); } - if(this.indexDirty !== glData.indexDirty) + if (this.indexDirty !== glData.indexDirty) { glData.indexDirty = this.indexDirty; glData.indexBuffer.upload(); @@ -175,8 +174,8 @@ const drawMode = this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH ? gl.TRIANGLE_STRIP : gl.TRIANGLES; glData.vao.bind() - .draw(drawMode, this.indices.length) - .unbind(); + .draw(drawMode, this.indices.length) + .unbind(); } /** @@ -326,12 +325,12 @@ context.clip(); // Compute matrix transform - 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 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 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, @@ -343,7 +342,6 @@ } - /** * Renders a flat Mesh * @@ -355,17 +353,17 @@ const context = this.context; const vertices = Mesh.vertices; - const length = vertices.length/2; + const length = vertices.length / 2; // this.count++; context.beginPath(); - for (let i=1; i < length-2; i++) + for (let i = 1; i < length - 2; i++) { // draw some triangles! - const index = i*2; + const index = i * 2; - 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]; + 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); @@ -390,7 +388,6 @@ /** * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. * - * @param [matrix=this.worldTransform] {PIXI.Matrix} the transformation matrix of the sprite * @return {PIXI.Rectangle} the framing rectangle */ _calculateBounds() @@ -405,27 +402,33 @@ * @param point {PIXI.Point} the point to test * @return {boolean} the result of the test */ - containsPoint( point ) { - if (!this.getBounds().contains(point.x, point.y)) { + containsPoint(point) + { + if (!this.getBounds().contains(point.x, point.y)) + { return false; } - this.worldTransform.applyInverse(point, tempPoint); + this.worldTransform.applyInverse(point, tempPoint); - let vertices = this.vertices; - let points = tempPolygon.points; + const vertices = this.vertices; + const points = tempPolygon.points; - let indices = this.indices; - let len = this.indices.length; - let step = this.drawMode === Mesh.DRAW_MODES.TRIANGLES ? 3 : 1; - for (let i=0;i+2 maxBatchSize) { + if (batchSize > maxBatchSize) + { batchSize = maxBatchSize; } - if (batchSize > maxSize) { + if (batchSize > maxSize) + { batchSize = maxSize; } @@ -120,7 +122,8 @@ */ setProperties(properties) { - if ( properties ) { + if (properties) + { this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0]; this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1]; this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2]; @@ -156,18 +159,18 @@ } - if(!this.baseTexture) + if (!this.baseTexture) { this.baseTexture = this.children[0]._texture.baseTexture; - if(!this.baseTexture.hasLoaded) + if (!this.baseTexture.hasLoaded) { this.baseTexture.once('update', () => this.onChildrenChange(0)); } } - renderer.setObjectRenderer( renderer.plugins.particle ); - renderer.plugins.particle.render( this ); + renderer.setObjectRenderer(renderer.plugins.particle); + renderer.plugins.particle.render(this); } /** @@ -178,7 +181,8 @@ onChildrenChange(smallestChildIndex) { const bufferIndex = Math.floor(smallestChildIndex / this._batchSize); - if (bufferIndex < this._bufferToUpdate) { + if (bufferIndex < this._bufferToUpdate) + { this._bufferToUpdate = bufferIndex; } } @@ -246,8 +250,8 @@ isRotated = false; } - positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); - positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); + positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x + 0.5); + positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y + 0.5); finalWidth = frame.width * child.scale.x; finalHeight = frame.height * child.scale.y; @@ -314,11 +318,14 @@ * Destroys the container * */ - destroy() { + destroy() + { super.destroy(arguments); - if (this._buffers) { - for (let i = 0; i < this._buffers.length; ++i) { + if (this._buffers) + { + for (let i = 0; i < this._buffers.length; ++i) + { this._buffers[i].destroy(); } } diff --git a/src/particles/webgl/ParticleBuffer.js b/src/particles/webgl/ParticleBuffer.js index 2c5a7e5..bc97770 100644 --- a/src/particles/webgl/ParticleBuffer.js +++ b/src/particles/webgl/ParticleBuffer.js @@ -178,7 +178,7 @@ { for (let i = 0; i < this.dynamicProperties.length; i++) { - let property = this.dynamicProperties[i]; + const property = this.dynamicProperties[i]; property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset); } @@ -193,7 +193,7 @@ { for (let i = 0; i < this.staticProperties.length; i++) { - let property = this.staticProperties[i]; + const property = this.staticProperties[i]; property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset); } diff --git a/src/particles/webgl/ParticleRenderer.js b/src/particles/webgl/ParticleRenderer.js index 3f3a4fe..4c276ab 100644 --- a/src/particles/webgl/ParticleRenderer.js +++ b/src/particles/webgl/ParticleRenderer.js @@ -20,8 +20,7 @@ * @memberof PIXI * @param renderer {PIXI.WebGLRenderer} The renderer this sprite batch works for. */ -class ParticleRenderer extends core.ObjectRenderer -{ +class ParticleRenderer extends core.ObjectRenderer { constructor(renderer) { super(renderer); @@ -65,38 +64,38 @@ this.properties = [ // verticesData { - attribute:this.shader.attributes.aVertexPosition, - size:2, - uploadFunction:this.uploadVertices, - offset:0 + attribute: this.shader.attributes.aVertexPosition, + size: 2, + uploadFunction: this.uploadVertices, + offset: 0 }, // positionData { - attribute:this.shader.attributes.aPositionCoord, - size:2, - uploadFunction:this.uploadPosition, - offset:0 + attribute: this.shader.attributes.aPositionCoord, + size: 2, + uploadFunction: this.uploadPosition, + offset: 0 }, // rotationData { - attribute:this.shader.attributes.aRotation, - size:1, - uploadFunction:this.uploadRotation, - offset:0 + attribute: this.shader.attributes.aRotation, + size: 1, + uploadFunction: this.uploadRotation, + offset: 0 }, // uvsData { - attribute:this.shader.attributes.aTextureCoord, - size:2, - uploadFunction:this.uploadUvs, - offset:0 + attribute: this.shader.attributes.aTextureCoord, + size: 2, + uploadFunction: this.uploadUvs, + offset: 0 }, // alphaData { - attribute:this.shader.attributes.aColor, - size:1, - uploadFunction:this.uploadAlpha, - offset:0 + attribute: this.shader.attributes.aColor, + size: 1, + uploadFunction: this.uploadAlpha, + offset: 0 } ]; @@ -124,20 +123,20 @@ batchSize = container._batchSize; let totalChildren = children.length; - if(totalChildren === 0) + if (totalChildren === 0) { return; } - else if(totalChildren > maxSize) + else if (totalChildren > maxSize) { totalChildren = maxSize; } let buffers = container._glBuffers[this.renderer.CONTEXT_UID]; - if(!buffers) + if (!buffers) { - buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers( container ); + buffers = container._glBuffers[this.renderer.CONTEXT_UID] = this.generateBuffers(container); } // if the uvs have not updated then no point rendering just yet! @@ -145,8 +144,8 @@ const gl = this.renderer.gl; - const m = container.worldTransform.copy( this.tempMatrix ); - m.prepend( this.renderer._activeRenderTarget.projectionMatrix ); + 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; @@ -160,7 +159,7 @@ for (let i = 0, j = 0; i < totalChildren; i += batchSize, j += 1) { let amount = ( totalChildren - i); - if(amount > batchSize) + if (amount > batchSize) { amount = batchSize; } @@ -171,7 +170,7 @@ buffer.uploadDynamic(children, i, amount); // we only upload the static content when we have to! - if(container._bufferToUpdate === j) + if (container._bufferToUpdate === j) { buffer.uploadStatic(children, i, amount); container._bufferToUpdate = j + 1; @@ -179,12 +178,12 @@ // bind the buffer buffer.vao.bind() - .draw(gl.TRIANGLES, amount * 6) - .unbind(); + .draw(gl.TRIANGLES, amount * 6) + .unbind(); - // now draw those suckas! - // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); - // this.renderer.drawCount++; + // now draw those suckas! + // gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0); + // this.renderer.drawCount++; } } @@ -229,7 +228,8 @@ sy, w0, w1, h0, h1; - for (let i = 0; i < amount; i++) { + for (let i = 0; i < amount; i++) + { sprite = children[startIndex + i]; texture = sprite._texture; @@ -250,10 +250,10 @@ } else { - w0 = (orig.width ) * (1-sprite.anchor.x); + w0 = (orig.width ) * (1 - sprite.anchor.x); w1 = (orig.width ) * -sprite.anchor.x; - h0 = orig.height * (1-sprite.anchor.y); + h0 = orig.height * (1 - sprite.anchor.y); h1 = orig.height * -sprite.anchor.y; } @@ -283,7 +283,7 @@ * @param stride {number} * @param offset {number} */ - uploadPosition(children,startIndex, amount, array, stride, offset) + uploadPosition(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -315,7 +315,7 @@ * @param stride {number} * @param offset {number} */ - uploadRotation(children,startIndex, amount, array, stride, offset) + uploadRotation(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -340,7 +340,7 @@ * @param stride {number} * @param offset {number} */ - uploadUvs(children,startIndex, amount, array, stride, offset) + uploadUvs(children, startIndex, amount, array, stride, offset) { for (let i = 0; i < amount; i++) { @@ -391,10 +391,10 @@ * @param stride {number} * @param offset {number} */ - uploadAlpha(children,startIndex, amount, array, stride, offset) + uploadAlpha(children, startIndex, amount, array, stride, offset) { - for (let i = 0; i < amount; i++) - { + for (let i = 0; i < amount; i++) + { const spriteAlpha = children[startIndex + i].alpha; array[offset] = spriteAlpha; @@ -413,7 +413,8 @@ */ destroy() { - if (this.renderer.gl) { + if (this.renderer.gl) + { this.renderer.gl.deleteBuffer(this.indexBuffer); } core.ObjectRenderer.prototype.destroy.apply(this, arguments); diff --git a/src/polyfill/Math.sign.js b/src/polyfill/Math.sign.js index dc957a2..229c8e1 100644 --- a/src/polyfill/Math.sign.js +++ b/src/polyfill/Math.sign.js @@ -3,7 +3,8 @@ if (!Math.sign) { - Math.sign = function (x) { + Math.sign = function (x) + { x = +x; if (x === 0 || isNaN(x)) { diff --git a/src/polyfill/index.js b/src/polyfill/index.js index 361b94e..405feb3 100644 --- a/src/polyfill/index.js +++ b/src/polyfill/index.js @@ -2,15 +2,19 @@ require('./requestAnimationFrame'); require('./Math.sign'); -if(!window.ArrayBuffer){ - window.ArrayBuffer = Array; +if (!window.ArrayBuffer) +{ + window.ArrayBuffer = Array; } -if(!window.Float32Array) { - window.Float32Array = Array; +if (!window.Float32Array) +{ + window.Float32Array = Array; } -if(!window.Uint32Array){ - window.Uint32Array = Array; +if (!window.Uint32Array) +{ + window.Uint32Array = Array; } -if(!window.Uint16Array){ - window.Uint16Array = Array; +if (!window.Uint16Array) +{ + window.Uint16Array = Array; } diff --git a/src/polyfill/requestAnimationFrame.js b/src/polyfill/requestAnimationFrame.js index 20ef06f..15ca758 100644 --- a/src/polyfill/requestAnimationFrame.js +++ b/src/polyfill/requestAnimationFrame.js @@ -10,57 +10,70 @@ // correct reference of `global`, `self`, and finally `window` // Date.now -if (!(Date.now && Date.prototype.getTime)) { - Date.now = function now() { +if (!(Date.now && Date.prototype.getTime)) +{ + Date.now = function now() + { return new Date().getTime(); }; } // performance.now -if (!(global.performance && global.performance.now)) { - let startTime = Date.now(); - if (!global.performance) { +if (!(global.performance && global.performance.now)) +{ + const startTime = Date.now(); + if (!global.performance) + { global.performance = {}; } - global.performance.now = function () { + global.performance.now = function () + { return Date.now() - startTime; }; } // requestAnimationFrame let lastTime = Date.now(); -let vendors = ['ms', 'moz', 'webkit', 'o']; +const vendors = ['ms', 'moz', 'webkit', 'o']; -for(let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) { +for (let x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) +{ global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame']; global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] || global[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!global.requestAnimationFrame) { - global.requestAnimationFrame = function (callback) { - if (typeof callback !== 'function') { +if (!global.requestAnimationFrame) +{ + global.requestAnimationFrame = function (callback) + { + if (typeof callback !== 'function') + { throw new TypeError(callback + 'is not a function'); } - let currentTime = Date.now(), - delay = 16 + lastTime - currentTime; + const currentTime = Date.now(); + let delay = 16 + lastTime - currentTime; - if (delay < 0) { + if (delay < 0) + { delay = 0; } lastTime = currentTime; - return setTimeout(function () { + return setTimeout(function () + { lastTime = Date.now(); callback(performance.now()); }, delay); }; } -if (!global.cancelAnimationFrame) { - global.cancelAnimationFrame = function(id) { +if (!global.cancelAnimationFrame) +{ + global.cancelAnimationFrame = function (id) + { clearTimeout(id); }; } diff --git a/src/prepare/webgl/WebGLPrepare.js b/src/prepare/webgl/WebGLPrepare.js index 643cf0e..a8b5744 100644 --- a/src/prepare/webgl/WebGLPrepare.js +++ b/src/prepare/webgl/WebGLPrepare.js @@ -106,7 +106,7 @@ // Upload the graphics while(this.queue.length && this.numLeft > 0) { - let item = this.queue[0]; + const item = this.queue[0]; let uploaded = false; for (let i = 0, len = this.uploadHooks.length; i < len; i++) { @@ -133,7 +133,7 @@ { this.ticking = false; SharedTicker.remove(this.tick, this); - let completes = this.completes.slice(0); + const completes = this.completes.slice(0); this.completes.length = 0; for (let i = 0, len = completes.length; i < len; i++) { diff --git a/test/core/Bounds.js b/test/core/Bounds.js index d46ee5f..19c51c1 100644 --- a/test/core/Bounds.js +++ b/test/core/Bounds.js @@ -1,6 +1,8 @@ -describe('getBounds', function () { +describe('getBounds', function () +{ - it('should register correct width and height with a LOADED Sprite', function() { + it('should register correct width and height with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -40,7 +42,8 @@ }); - it('should register correct width and height with Graphics', function() { + it('should register correct width and height with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -87,7 +90,8 @@ }); - it('should register correct width and height with an empty Container', function() { + it('should register correct width and height with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -118,7 +122,8 @@ }); - it('should register correct width and height with a Container', function() { + it('should register correct width and height with a Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -166,7 +171,8 @@ }); - it('should register correct width and height with an item that has already had its parent Container transformed', function() { + it('should register correct width and height with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -197,7 +203,8 @@ expect(bounds.height).to.equal(10); }); - it('should register correct width and height with a Mesh', function() { + it('should register correct width and height with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -230,7 +237,8 @@ }); - it('should register correct width and height with an a DisplayObject is visible false', function() { + it('should register correct width and height with an a DisplayObject is visible false', function () + { var parent = new PIXI.Container(); @@ -274,7 +282,8 @@ }); - it('should register correct width and height with an a DisplayObject parent has moved', function() { + it('should register correct width and height with an a DisplayObject parent has moved', function () + { var parent = new PIXI.Container(); @@ -286,8 +295,8 @@ parent.addChild(container); - // graphics.position.x = 100; - // graphics.position.y = 100; + // graphics.position.x = 100; + // graphics.position.y = 100; container.position.x -= 100; container.position.y -= 100; @@ -301,7 +310,8 @@ }); - it('should register correct width and height with an a Text Object', function() { + it('should register correct width and height with an a Text Object', function () + { var parent = new PIXI.Container(); @@ -332,7 +342,8 @@ }); - it('should return a different rectangle if getting local bounds after global bounds ', function() { + it('should return a different rectangle if getting local bounds after global bounds ', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -361,14 +372,15 @@ expect(localBounds.height).to.equal(10); }); - it('should ensure bounds respect the trim of a texture ', function() { + it('should ensure bounds respect the trim of a texture ', function () + { var parent = new PIXI.Container(); var baseTexture = new PIXI.BaseRenderTexture(100, 100); - var orig = new PIXI.Rectangle(0,0,100,50); - var frame = new PIXI.Rectangle(2,2,50,50); - var trim = new PIXI.Rectangle(25,0,50,50); + var orig = new PIXI.Rectangle(0, 0, 100, 50); + var frame = new PIXI.Rectangle(2, 2, 50, 50); + var trim = new PIXI.Rectangle(25, 0, 50, 50); var trimmedTexture = new PIXI.Texture(baseTexture, frame, orig, trim); @@ -387,4 +399,4 @@ expect(bounds.height).to.equal(50); }); -}); \ No newline at end of file +}); diff --git a/test/core/Container.js b/test/core/Container.js index 34b5947..18d3f41 100755 --- a/test/core/Container.js +++ b/test/core/Container.js @@ -1,6 +1,9 @@ -describe('PIXI.Container', function () { - describe('parent', function () { - it('should be present when adding children to Container', function() { +describe('PIXI.Container', function () +{ + describe('parent', function () + { + it('should be present when adding children to Container', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(); @@ -11,19 +14,23 @@ }); }); - describe('events', function () { - it('should trigger "added" and "removed" events on it\'s children', function () { + describe('events', function () + { + it('should trigger "added" and "removed" events on it\'s children', function () + { var container = new PIXI.Container(), child = new PIXI.DisplayObject(), triggeredAdded = false, triggeredRemoved = false; - child.on('added', function(to) { + child.on('added', function (to) + { triggeredAdded = true; expect(container.children.length).to.be.equals(1); expect(child.parent).to.be.equals(to); }); - child.on('removed', function(from) { + child.on('removed', function (from) + { triggeredRemoved = true; expect(container.children.length).to.be.equals(0); expect(child.parent).to.be.null; diff --git a/test/core/DisplayObject.js b/test/core/DisplayObject.js index e2ee32d..9ba9bdd 100755 --- a/test/core/DisplayObject.js +++ b/test/core/DisplayObject.js @@ -1,5 +1,7 @@ -describe('PIXI.DisplayObject', function () { - it('should be able to add itself to a Container', function() { +describe('PIXI.DisplayObject', function () +{ + it('should be able to add itself to a Container', function() + { var child = new PIXI.DisplayObject(), container = new PIXI.Container(); diff --git a/test/core/Sprite.js b/test/core/Sprite.js index f94952a..9a238f7 100755 --- a/test/core/Sprite.js +++ b/test/core/Sprite.js @@ -1,6 +1,9 @@ -describe('PIXI.Sprite', function () { - describe('width', function () { - it('should not be negative for nagative scale.x', function () { +describe('PIXI.Sprite', function () +{ + describe('width', function () + { + it('should not be negative for nagative scale.x', function () + { var sprite = new PIXI.Sprite(); sprite.width = 100; @@ -9,7 +12,8 @@ expect(sprite.width).to.be.at.least(0); }); - it('should not change sign of scale.x', function () { + it('should not change sign of scale.x', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); @@ -26,8 +30,10 @@ }); }); - describe('height', function () { - it('should not be negative for nagative scale.y', function () { + describe('height', function () + { + it('should not be negative for nagative scale.y', function () + { var sprite = new PIXI.Sprite(); sprite.height = 100; @@ -36,7 +42,8 @@ expect(sprite.height).to.be.at.least(0); }); - it('should not change sign of scale.y', function () { + it('should not change sign of scale.y', function () + { var texture = new PIXI.Texture(new PIXI.BaseTexture()); var sprite = new PIXI.Sprite(); diff --git a/test/core/Text.js b/test/core/Text.js index 61cfac7..53bdc6c 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -1,6 +1,9 @@ -describe('PIXI.Text', function () { - describe('destroy', function () { - it('should call through to Sprite.destroy', function () { +describe('PIXI.Text', function () +{ + describe('destroy', function () + { + it('should call through to Sprite.destroy', function () + { var text = new PIXI.Text("foo"); expect(text.anchor).to.not.equal(null); @@ -8,7 +11,8 @@ expect(text.anchor).to.equal(null); }); - it('should set context to null', function () { + it('should set context to null', function () + { var text = new PIXI.Text("foo"); expect(text.style).to.not.equal(null); @@ -16,7 +20,8 @@ expect(text.style).to.equal(null); }); - it('should destroy children if children flag is set', function () { + it('should destroy children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -26,7 +31,8 @@ expect(child.transform).to.equal(null); }); - it('should accept options correctly', function () { + it('should accept options correctly', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(); @@ -36,35 +42,39 @@ expect(child.transform).to.equal(null); }); - it('should pass opts on to children if children flag is set', function () { + it('should pass opts on to children if children flag is set', function () + { var text = new PIXI.Text("foo"), child = new PIXI.DisplayObject(), childDestroyOpts; - child.destroy = function(opts) { + child.destroy = function (opts) + { childDestroyOpts = opts; }; text.addChild(child); text.destroy({children: true, texture: true}); - expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture:true}); + expect(childDestroyOpts).to.deep.equal({children: true, texture: true, baseTexture: true}); }); - it('should modify the height of the object when setting height', function () { + it('should modify the height of the object when setting height', function () + { - var text = new PIXI.Text("foo"); - text.height = 300; + var text = new PIXI.Text("foo"); + text.height = 300; - expect(text.height).to.equal(300); + expect(text.height).to.equal(300); }); - it('should modify the width of the object when setting width', function () { + it('should modify the width of the object when setting width', function () + { - var text = new PIXI.Text("foo"); - text.width = 300; + var text = new PIXI.Text("foo"); + text.width = 300; - expect(text.width).to.equal(300); + expect(text.width).to.equal(300); }); }); diff --git a/test/core/getLocalBounds.js b/test/core/getLocalBounds.js index b9f6b2c..d2702ce 100644 --- a/test/core/getLocalBounds.js +++ b/test/core/getLocalBounds.js @@ -1,7 +1,7 @@ -describe('getLocalBounds', function () { - - - it('should register correct local-bounds with a LOADED Sprite', function() { +describe('getLocalBounds', function () +{ + it('should register correct local-bounds with a LOADED Sprite', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -33,7 +33,8 @@ }); - it('should register correct local-bounds with Graphics', function() { + it('should register correct local-bounds with Graphics', function () + { var parent = new PIXI.Container(); var graphics = new PIXI.Graphics(); @@ -53,7 +54,8 @@ }); - it('should register correct local-bounds with an empty Container', function() { + it('should register correct local-bounds with an empty Container', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -70,7 +72,8 @@ }); - it('should register correct local-bounds with an item that has already had its parent Container transformed', function() { + it('should register correct local-bounds with an item that has already had its parent Container transformed', function () + { var parent = new PIXI.Container(); var container = new PIXI.Container();//Graphics().beginFill(0xFF0000).drawCircle(0, 0, 10, 10);//texture); @@ -92,10 +95,10 @@ expect(bounds.height).to.equal(10); - }); - it('should register correct local-bounds with a Mesh', function() { + it('should register correct local-bounds with a Mesh', function () + { var parent = new PIXI.Container(); var texture = PIXI.RenderTexture.create(10, 10); @@ -115,21 +118,24 @@ expect(bounds.height).to.equal(10); }); - it('should register correct local-bounds with a cachAsBitmap item inside after a render', function() { + it('should register correct local-bounds with a cachAsBitmap item inside after a render', function () + { var parent = new PIXI.Container(); var graphic = new PIXI.Graphics(); graphic.beginFill(0xffffff); - graphic.drawRect(0,0,100,100); + graphic.drawRect(0, 0, 100, 100); graphic.endFill(); - graphic.cacheAsBitmap=true; + graphic.cacheAsBitmap = true; parent.addChild(graphic); var renderer = new PIXI.CanvasRenderer(100, 100); - renderer.sayHello = function(){}; + renderer.sayHello = function () + { + }; renderer.render(parent); var bounds = parent.getLocalBounds(); @@ -139,4 +145,4 @@ expect(bounds.width).to.equal(100); expect(bounds.height).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/toGlobal.js b/test/core/toGlobal.js index 7fd34c1..c70c538 100644 --- a/test/core/toGlobal.js +++ b/test/core/toGlobal.js @@ -1,8 +1,7 @@ -describe('toGlobal', function () { - - - it('should return correct global cordinates of a point from within a displayObject', function() { - +describe('toGlobal', function () +{ + it('should return correct global cordinates of a point from within a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -28,7 +27,5 @@ expect(globalPoint.x).to.equal(220); expect(globalPoint.y).to.equal(220); - }); - }); diff --git a/test/core/toLocal.js b/test/core/toLocal.js index 33447d0..f64406d 100644 --- a/test/core/toLocal.js +++ b/test/core/toLocal.js @@ -1,7 +1,7 @@ -describe('toLocal', function () { - - it('should return correct local cordinates of a displayObject', function() { - +describe('toLocal', function () +{ + it('should return correct local cordinates of a displayObject', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -30,8 +30,8 @@ }); - it('should map the correct local cordinates of a displayObject to another', function() { - + it('should map the correct local cordinates of a displayObject to another', function() + { var parent = new PIXI.Container(); var container = new PIXI.Container(); @@ -54,4 +54,4 @@ expect(localPoint.y).to.equal(100); }); -}); \ No newline at end of file +}); diff --git a/test/core/util.js b/test/core/util.js index ab695ae..3ce4726 100755 --- a/test/core/util.js +++ b/test/core/util.js @@ -1,18 +1,24 @@ -describe('PIXI.utils', function () { - describe('uid', function () { - it('should exist', function () { +describe('PIXI.utils', function () +{ + describe('uid', function () + { + it('should exist', function () + { expect(PIXI.utils.uid) .to.be.a('function'); }); - it('should return a number', function () { + it('should return a number', function () + { expect(PIXI.utils.uid()) .to.be.a('number'); }); }); - describe('hex2rgb', function () { - it('should exist', function () { + describe('hex2rgb', function () + { + it('should exist', function () + { expect(PIXI.utils.hex2rgb) .to.be.a('function'); }); @@ -20,8 +26,10 @@ // it('should properly convert number to rgb array'); }); - describe('hex2string', function () { - it('should exist', function () { + describe('hex2string', function () + { + it('should exist', function () + { expect(PIXI.utils.hex2string) .to.be.a('function'); }); @@ -29,8 +37,10 @@ // it('should properly convert number to hex color string'); }); - describe('rgb2hex', function () { - it('should exist', function () { + describe('rgb2hex', function () + { + it('should exist', function () + { expect(PIXI.utils.rgb2hex) .to.be.a('function'); }); @@ -38,8 +48,10 @@ // it('should properly convert rgb array to hex color string'); }); - describe('getResolutionOfUrl', function () { - it('should exist', function () { + describe('getResolutionOfUrl', function () + { + it('should exist', function () + { expect(PIXI.utils.getResolutionOfUrl) .to.be.a('function'); }); @@ -47,66 +59,82 @@ // it('should return the correct resolution based on a URL'); }); - describe('sayHello', function () { - it('should exist', function () { + describe('sayHello', function () + { + it('should exist', function () + { expect(PIXI.utils.sayHello) .to.be.a('function'); }); }); - describe('isWebGLSupported', function () { - it('should exist', function () { + describe('isWebGLSupported', function () + { + it('should exist', function () + { expect(PIXI.utils.isWebGLSupported) .to.be.a('function'); }); }); - describe('sign', function () { - it('should return 0 for 0', function () { + describe('sign', function () + { + it('should return 0 for 0', function () + { expect(PIXI.utils.sign(0)) .to.be.equal(0); }); - it('should return -1 for negative numbers', function () { - for (var i = 0;i<10;i+=1){ + it('should return -1 for negative numbers', function () + { + for (var i = 0; i < 10; i += 1) + { expect(PIXI.utils.sign(-Math.random())) .to.be.equal(-1); } }); - it('should return 1 for positive numbers', function () { - for (var i = 0;i<10;i+=1){ + it('should return 1 for positive numbers', function () + { + for (var i = 0; i < 10; i += 1) + { expect(PIXI.utils.sign(Math.random() + 0.000001)) .to.be.equal(1); } }); }); - describe('.removeItems', function () { + describe('.removeItems', function () + { var arr; - beforeEach(function () { + beforeEach(function () + { arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; }); - it('should return if the start index is greater than or equal to the length of the array', function () { - PIXI.utils.removeItems(arr, arr.length+1, 5); + it('should return if the start index is greater than or equal to the length of the array', function () + { + PIXI.utils.removeItems(arr, arr.length + 1, 5); expect(arr.length).to.be.equal(10); }); - it('should return if the remove count is 0', function () { + it('should return if the remove count is 0', function () + { PIXI.utils.removeItems(arr, 2, 0); expect(arr.length).to.be.equal(10); }); - it('should remove the number of elements specified from the array, starting from the start index', function () { - var res = [ 1, 2, 3, 8, 9, 10 ]; + it('should remove the number of elements specified from the array, starting from the start index', function () + { + var res = [1, 2, 3, 8, 9, 10]; PIXI.utils.removeItems(arr, 3, 4); expect(arr).to.be.deep.equal(res); }); - it('should remove rest of elements if the delete count is > than the number of elements after start index', function () { - var res = [ 1, 2, 3, 4, 5, 6, 7 ]; + it('should remove rest of elements if the delete count is > than the number of elements after start index', function () + { + var res = [1, 2, 3, 4, 5, 6, 7]; PIXI.utils.removeItems(arr, 7, 10); expect(arr).to.be.deep.equal(res); }); diff --git a/test/index.js b/test/index.js index fb7dd8a..e8bed72 100755 --- a/test/index.js +++ b/test/index.js @@ -1,9 +1,11 @@ require('../bin/pixi'); -describe('PIXI', function () { - it('should exist as a global object', function () { +describe('PIXI', function () +{ + it('should exist as a global object', function () + { expect(PIXI).to.be.an('object'); }); require('./core'); require('./interaction'); -}); \ No newline at end of file +}); diff --git a/test/interaction/InteractionData.js b/test/interaction/InteractionData.js index bd57181..6b5f583 100755 --- a/test/interaction/InteractionData.js +++ b/test/interaction/InteractionData.js @@ -1,6 +1,9 @@ -describe('PIXI.interaction.InteractionData', function() { - describe('getLocalPosition', function() { - it('should populate second parameter with result', function() { +describe('PIXI.interaction.InteractionData', function() +{ + describe('getLocalPosition', function() + { + it('should populate second parameter with result', function() + { var data = new PIXI.interaction.InteractionData(), stage = new PIXI.DisplayObject(), displayObject = new PIXI.DisplayObject(),